div + float + border без height

[satan]

Добрый день.

Столкнулся с проблемой:

Существует структура:

<div style="width:200px; border:1px solid red;">

<div style="float:left; width:100px;">

text

</div>

<div style="float:left; width:100px;">

text2

</div>

</div>

высота не указана, так как она динамически должна меняться.

Проблема заключается в том, что бордер основного блока - уменьшается до 1-го пикселя.

Тоесть как бы не определен размер блока.

Как можно решить данную проблему?

Спасибо за помощь.

[Justnewone]

  satan said:

Добрый день.

Столкнулся с проблемой:

Существует структура:

<div style="width:200px; border:1px solid red;">

<div style="float:left; width:100px;">

text

</div>

<div style="float:left; width:100px;">

text2

</div>

</div>

высота не указана, так как она динамически должна меняться.

Проблема заключается в том, что бордер основного блока - уменьшается до 1-го пикселя.

Тоесть как бы не определен размер блока.

Как можно решить данную проблему?

Спасибо за помощь.

Много способов, тут на форме - чуть ли не каждый десятый пост.

Научитесь пользоваться поиском.

Один из:

overflow:hodden

zoom:1 - для IE6

Edited August 28, 2009 by Justnewone

[Great Rash]

Камрад спит видимо

overflow: hidden;

zoom: 1;

[satan]

  Great Rash said:

Камрад спит видимо

overflow: hidden;

zoom: 1;

overflow - не подходит - мне не нужно обрезать содержимое блока.

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

[Justnewone]

  satan said:

overflow - не подходит - мне не нужно обрезать содержимое блока.

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

Поиском видать лень...

контейнер:after{

content:"";

display:block;

height:0;

overflow:hidden;

clear:both;

}

Edited August 28, 2009 by Justnewone

[mishka]

на родителя оверфлов хидден, так как высота неуказанна жестко то она будет тянутся

и зум ненадо так как ширина есть уже

[Justnewone]

  mishka2 said:

и зум ненадо так как ширина есть уже

Ширина haslayout не включает, может "высота"?

[mishka]

  satan said:

overflow - не подходит - мне не нужно обрезать содержимое блока.

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

А ширина указана инлайново

[satan]

Решил все более элементарно:

display:inline-block;

vertical-align:top; (потому как тест что в других блоках падает вниз)

В общем пасибо всем за советы.

Кое-что помогло.

[mishka]

display:inline-block; небудет работать в ие и фф2

Если полную резину хотите то родителю ширину 100%, оверфлов хидден (высота потянется), а внутренние флотайте.

Если нельзя использовать оверфлов хидден, так как допустим какойто елемент вытянут(визуально), минусовым маргином либо абсолютом, за пределы блока, то вместо оверфлов используйте аффтер(выше пример есть)

Edited August 28, 2009 by mishka2