float

[nomn]

Доброго времени суток. Подскажите пожалуйста как решить проблему с float'ом.

Собственно линк на сетку: http://inkrasnodar.ru/w/GOVNO/index.html

Проблема очевидна. Левая колонка ниразу не левая

Спасибо.

[Softlink]

разбираться в такой куче полностью лениво было, но так помогло:

.content_container
{
	height: 500px;
	border: 1px solid pink;
	overflow:hidden;
	margin-top:10px;

}

у вас почему-то верхний блок налазит на нижний и не дает ему двигаться. Отодвинул container и все заработало.

а почему он налазит, уже не разбирался - много вы всего там нагородили

Edited July 2, 2011 by Softlink

[SelenIT]

Левая колонка цепляется за выступ "Календаря" из предшествующего блока .pages. Поставьте этому блоку overflow:hidden или clearfix (в общем, сделайте что-нибудь, чтобы вернуть в поток календарь и его соседей), и эта проблема решится.

[nomn]

Спасибо за ответы!

@Softlink - спасибо, но твой метод не то, что нужно. Это эдакий "костыль"

@SelenIT, спасибо, но это только частично решает проблему. Я пробовал делать clearfix. Результат тот же (см. http://inkrasnodar.ru/w/GOVNO/index.html)

т.е. флоат левой колонке присвоился, но объекты которые должны обтекать колонку слева начинаются оттуда же, откуда и левая колонка. Так не должно быть =(

Подскажите пожалуйста, как это исправить. Спасибо

[Softlink]

Спасибо за ответы!

@Softlink - спасибо, но твой метод не то, что нужно. Это эдакий "костыль"

@SelenIT, спасибо, но это только частично решает проблему. Я пробовал делать clearfix. Результат тот же (см. http://inkrasnodar.ru/w/GOVNO/index.html)

т.е. флоат левой колонке присвоился, но объекты которые должны обтекать колонку слева начинаются оттуда же, откуда и левая колонка. Так не должно быть =(

Подскажите пожалуйста, как это исправить. Спасибо

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

[amelice]

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

А почему чуть больше? Я часто встречаю такое, но не понимаю почему так делается? Например левый флоат:200 пх. а margin-left правого дива:220 пх?

[nomn]

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

Конечно так можно сделать. Но один опытный верстальщик сказал мне "все флоаты должны работать правильно" и что маргином имитировать флоат - "нубство".

Гуру верстки, скажите как же мне быть?

[Softlink]

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

А почему чуть больше? Я часто встречаю такое, но не понимаю почему так делается? Например левый флоат:200 пх. а margin-left правого дива:220 пх?

никто не запрещает и впритык сделать, но обычно между блоками делают отступы. Например чтобы текст не был вплотную.

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

Конечно так можно сделать. Но один опытный верстальщик сказал мне "все флоаты должны работать правильно" и что маргином имитировать флоат - "нубство".

Гуру верстки, скажите как же мне быть?

абсолютно не вижу ничего тут зазорного. Посмотрите как здесь сделано http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva

Нужны еще весомее аргументы?

[nomn]

Спасибо! Более чем) п.с. система не позволяет тыкнуть +

[amelice]

никто не запрещает и впритык сделать, но обычно между блоками делают отступы. Например чтобы текст не был вплотную.

Я думала, тут кроется еще какая-то другая цель, но если так то понятно.

[Softlink]

Спасибо! Более чем) п.с. система не позволяет тыкнуть +

на здоровье) Сразу, ес. честно, не было времени покопаться в вашем коде, чтобы посмотреть, что откуда наезжает. Решил просто явно проблему указать.

никто не запрещает и впритык сделать, но обычно между блоками делают отступы. Например чтобы текст не был вплотную.

Я думала, тут кроется еще какая-то другая цель, но если так то понятно.

ну я по крайней мере не знаю, может еще что-то есть Наверное с отступом текста это не самый удачный пример привел(т.к. можно решить дело и паддингами), но допустим, если обоим блокам нужна рамка - становится очевидно, зачем делать маржин больше

[amelice]

ну я по крайней мере не знаю, может еще что-то есть Наверное с отступом текста это не самый удачный пример привел(т.к. можно решить дело и паддингами), но допустим, если обоим блокам нужна рамка - становится очевидно, зачем делать маржин больше

допустим сайт резиновый. флоат слева имеет ширину 20% и рамка у него есть- 2 px. рамка ведь не задается в %. какое значение нужно написать в margin-left для дива справа?

такое можно высчитать?

[Softlink]

ну я по крайней мере не знаю, может еще что-то есть Наверное с отступом текста это не самый удачный пример привел(т.к. можно решить дело и паддингами), но допустим, если обоим блокам нужна рамка - становится очевидно, зачем делать маржин больше

допустим сайт резиновый. флоат слева имеет ширину 20% и рамка у него есть- 2 px. рамка ведь не задается в %. какое значение нужно написать в margin-left для дива справа?

такое можно высчитать?

а зачем тут что-то высчитывать? Смотрим в макет и на глаз, сколько нам надо пикселей отступа, ставим его. Тем более, что макет резиновый, а правой части мы ширину не указываем, поэтому опасаться, что появится горизонтальный скролл, не стоит.

Вот примерчик http://jsfiddle.net/ZpSyt/

[amelice]

а зачем тут что-то высчитывать? Смотрим в макет и на глаз, сколько нам надо пикселей отступа, ставим его. Тем более, что макет резиновый, а правой части мы ширину не указываем, поэтому опасаться, что появится горизонтальный скролл, не стоит.

Вот примерчик http://jsfiddle.net/ZpSyt/

Спасибо за пример.

[nomn]

Нет ну все-таки.. почему флоат не работает как ему положено?)

[Gaspode]

т.е. флоат левой колонке присвоился, но объекты которые должны обтекать колонку слева начинаются оттуда же, откуда и левая колонка. Так не должно быть =(

Они в коде раньше идут. Они не знают, что после них флоат. С чего бы им его обтекать?

[amelice]

Нет ну все-таки.. почему флоат не работает как ему положено?)

а как ему положено работать? в твоем примере он работает так как надо:

флоат: лефт занял свою позицию, встал слева. максимально высоко, максимально влево. работает как блок, обычный див его не видит. ты с помощью свойства margin-left обычного дива, дал обоим блокам место быть на одной линии.

Edited July 2, 2011 by cheburek

[nomn]

Они в коде раньше идут. Они не знают, что после них флоат. С чего бы им его обтекать?

Должен обтекать content_container со вложенными в него блоками. Он идет в коде после!

а как ему положено работать?

Ознакомьтесь пожалуйста здесь: http://htmlbook.ru/css/float

[Softlink]

Они в коде раньше идут. Они не знают, что после них флоат. С чего бы им его обтекать?

Должен обтекать content_container со вложенными в него блоками. Он идет в коде после!

да вот как раз нет. Как этот левый блок будет обтекать content_container, если он в него вложен?

Здесь этот флоат обтекают остальные элементы в блоке content_container. И Gaspode правильно сказал. Зафлоченные элементы выпадают из потока. Т.е. остальные блоки их "не видят", а потому встают на их место.

[nomn]

Я перепутал. Имел ввиду content_main.

Тогда почему выше, да хоть в шапке, вообще в шаблоне уже есть много флоатов и

все они работают как положено. И только этому неймется

[Softlink]

Я перепутал. Имел ввиду content_main.

Тогда почему выше, да хоть в шапке, вообще в шаблоне уже есть много флоатов и

все они работают как положено. И только этому неймется

все правильно, они и работают как положено. Вы поймите одну простую вещь, элемент, которому задан float, хоть и становится блочным, но он выпадает из потока, становится "невидимым" для других элементов.

А вверху у вас все флоаты правильно отрабатывают. Там не нужны маржины, т.к. левая часть с фиксированной шириной, а правые пункты вы прибиваете float:right.

[psywalker]

макет же резиновый? Поставьте следующему блоку

.contant_main

margin-left, чуть больше чем ширина фиксированного флоата. Все должно заработать.

Конечно так можно сделать. Но один опытный верстальщик сказал мне "все флоаты должны работать правильно" и что маргином имитировать флоат - "нубство".

А ты уверена, что этот верстальщик действительно был опытным?

Тут нужно смотреть на ситуацию и понимать поведение того, что будет происходить, если задать у правой колонки левый отступ на ширину левой. А собственно ничего страшного, так как у тебя будет 100%, надёжный каркас, который не развалиться при плохой погоде. Единственный минус - это то, что когда ты например уберёшь левую колонку, то правая не расшириться до её места. Да, вот это минус, но опять же, если он для тебя не важен, то можешь смело использовать это решение.

Другой пример, если например вместо левого маргина, правой колонке поставить overflow: hidden;, вот тут тоже надёжно, но сулит уже другие проблем, наприимер с обрезанием вылезающего содержимого, но зато при убирании левой колонки, правая заполнит её место.

В общем говорить, что какой-то подход неверный - это неправильно, всегда нужно отталкиваться от конкретной задачи.

[amelice]

Они в коде раньше идут. Они не знают, что после них флоат. С чего бы им его обтекать?

Должен обтекать content_container со вложенными в него блоками. Он идет в коде после!

а как ему положено работать?

Ознакомьтесь пожалуйста здесь: http://htmlbook.ru/css/float

Этот вопрос был адресован вам. Я вижу ясно как работает флоат.

Edited July 3, 2011 by cheburek

[SelenIT]

а как ему положено работать?

Ознакомьтесь пожалуйста здесь: http://htmlbook.ru/css/float

Справочник — вещь хорошая, но исчерпывающее описание лучше искать не в нем, а в спецификации. С ней тоже полезно хотя бы ознакомиться . Например, для контекста форматирования блоков (наш случай) там сказано следующее:

В контексте форматирования блоков левый внешний край каждого бокса касается левого края бокса-контейнера (при форматировании справа налево — соприкасаются правые края). Это справедливо даже при наличии float-ов (хотя строчные боксы внутри блоков могут ужиматься из-за float-ов), кроме случаев, когда бокс создает новый контекст форматирования (в этом случае бокс может сам стать уже из-за флоатов).

[nomn]

И один вопрос остался: почему нельзя ставить + постам, которые считаешь полезными? (как можно превысить лимит + если не ставил еще не одного)

[amelice]

Оказалось, не все ясно вижу.

Справочник — вещь хорошая, но исчерпывающее описание лучше искать не в нем, а в спецификации. С ней тоже полезно хотя бы ознакомиться . Например, для контекста форматирования блоков (наш случай) там сказано следующее:

К сожалению, английский у меня никакой. А гугл перевел так, что больше запутал.

Что, мне не ясно - работа сlear. Почему margin-top нижеследующего обычного дива со свойством cleаr не работает? Тема обсуждалась в этом топике.

Ииху! Слава W3C спекам! Нашел научное объяснение тому, к чему я пришел эмпирическим путем. Если кому-то интересно, то вот тут - http://www.w3.org/TR/CSS2/visuren.html#flow-control написано: Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

2buddah. Спасибо за ответы и ссылку, но похоже мы действительно друг друга не поняли. Статья что ты мне порекомендовал про float. Свойству clear там посвящены лишь пара абзацев, которые описывают общее применение.

Хотела бы понять, текст на английском, который написал rookie. SelenIT, пожалуйста помоги с переводом. Спасибо.