float в осле

[KukMan]

Есть две колонки. статического размера.Одна колонка флоутнутая влево. назначен статический размер. Вторая колонка просто подтянута с указанием левого маргина.
Применен способ неймоверного удлинения вниз, чтобы сравнять колонки. кажется все хорошо, но в осле, вторая колонка (правая) съежает вниз под первую. получается вроде этого:
________________________
|********|**************|
|*блабла*|**************|
|*блабла*|**************|
|*блабла*|**************|
|********|***основной***|
|********|****контент****|
|________|______________|
(пробелы форум режет, пришлось звездочками)
т.к. в левой колонке контент генерируемый, то обычным минусовым верхним магрином не отделаешся. спасибо за внимание.

[Aykroyd]

Зачем пользоваться способом неимоверного удлинения вниз? Имхо, извращение это. Тем более, что при использовании данного метода не получится прижать футер к низу (при небольшом контенте). Faux Columns рулят...

[KukMan]

ну это отношение к делу не имеет ,потому что даже если убрать padding-bottom:32767px;margin-bottom:-32767px; то все равно проблема остается. в данном случае метод ложных колонок не подошел бы. А так юзаю Faux Columns.

[Aykroyd]

Тогда код в студию... Только, пожалуйста, без всякой лишней, не имеющей отношения к проблеме детализации...

[KukMan]

****<div id="main">
 *<div id="left">

 *</div>
 *
 *<div id="content">

 *</div>
****</div>

Это HTML. Все стандартно.

#main {overflow:hidden;margin:0px auto;width:950px;}
#content {margin-left:211px;width:740px;border-left:solid 1px #FFF;padding-top:15px;padding-left:30px;background:transparent url('images/content.jpg') left top repeat-x;}
#left {padding-bottom:32767px;margin-bottom:-32767px;float:left;height:100%;width:210px;border-right:solid 1px #786c59;background:transparent url('images/column.jpg') left top repeat;}

Это части кода, которые относятся только к колонкам.

[garA]

если вам нужен "эффект таблиц", то можете воспользоваться следующим шаблоном

[KukMan]

это вы к чему? к border-left:solid 1px #FFF; и border-right:solid 1px #786c59;?

[Aykroyd]

Вообще замечательно...
И почему интересно же у Вас контент съезжает?
Как можно, спрашивается, в контейнер шириной 950px запихнуть содержимое шириной 982px ???
И вообще, зачем задавать блоку #content ширину? Какая необходимость?

[KukMan]

ошибку нашел. стыдно, чесс слово. а если у бокса шириной 200пикселей стоит левый бордер (к примеру) шириной в 1 пиксель, то ширина бокса будет 201рх?

[Aykroyd]

конечно)

Это же основа блочной модели. Ширина блока = width + боковые paddings + боковые borders + боковые margins...

[KukMan]

боковые margins??? Это же отступ от границы бокса до другого бокса. Или я чет не понимаю?
Вродь только с паддингами нада играться (изменять ширину и прочее), а с маргинами все норм...

Добавлено спустя....
После експериментов понял (возможно и неправильно понял), что маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе. Но если не уместится, маргин выйдет за пределы родителя (ситуация описывается в статьи [Только зарегистрированные пользователи могут видеть ссылки. ]). думаю, со мной согласятся, ведь если закрасить бокс шириной в 100рх и с маргинами бо бокам в 20, то будет закрашено только 100рх, а если с паддингами в 20пикселей, то будет 140рх закрашено. Как я понял, закрашеная область в этом случае и будет шириной бокса.

[Zigzag]

Originally posted by KukMan@Aug 6 2007, 20:54
боковые margins??? * Это же отступ от границы бокса до другого бокса.* Или я чет не понимаю?
Вродь только с паддингами нада играться (изменять ширину и прочее), а с маргинами все норм...

Добавлено спустя....
После експериментов понял (возможно и неправильно понял), что маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе. Но если не уместится, маргин выйдет за пределы родителя (ситуация описывается в статьи [Только зарегистрированные пользователи могут видеть ссылки. ]). думаю, со мной согласятся, ведь если закрасить бокс шириной в 100рх и с маргинами бо бокам в 20, то будет закрашено только 100рх, а если с паддингами в 20пикселей, то будет 140рх закрашено. Как я понял, закрашеная область в этом случае и будет шириной бокса.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

ширина блока = width + margin + padding + border

кстати, кому интересно, можно поиграть вот с такой штукой.
Чтобы заставить другие браузеры считать паддинги внутрь как IE, можно в стилях добавить

* { box-sizing: border-box; -moz-box-sizing: border-box; }

Причем доктайп ставить не надо, а то IE переключается в standard mode.

но это ток в качестве эксперимента =)

[Aykroyd]

Ну и наговорили же Вы всякой ереси... ))

маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе

Черное – это вроде бы белое, но в то же время белое – это вроде бы как бы и не черное... Масло маслянное, не находите? )

Результирующей шириной бокса будет сумма самой непосредственной ширины (width) и всех боковых полей, рамок и отступов. В принципе, Вы вроде бы все правильно усвоили, только вот нагородили лишнего... )

А разница между маргином и паддингом только в том и заключается, что на маргин (в отличие от паддинга) фоновый цвет не распространяется. И располагается маргин соответственно "после" бордера, а паддинг – "до"...

[KukMan]

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

[KukMan]

Чтобы заставить другие браузеры считать паддинги внутрь как IE

А что, осел по другому както паддинги считает? не замечал...

[Aykroyd]

Originally posted by Zigzag@Aug 7 2007, 00:34
но это ток в качестве эксперимента =)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ой, Павел... Слов нет... ))
Да не сбивал бы ты с пути истинного отроков неразумных... )

Originally posted by KukMan@Aug 7 2007, 00:40
А что, осел по другому както паддинги считает? не замечал...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Доктайп уберите (или неправильный поставьте), тогда IE6 будет все внутрь считать...