разобраться с хитрым float помогите

Orliha · November 13, 2007

<div style="width: 970px; margin: 0 auto; border:1px solid black">

 <div style="width: 270px; border:2px solid red; float:left">

 меню<br/> меню<br/> меню<br/> меню<br/> меню<br/>

 </div>

 <div style="margin-left:300px; background:green">

 <div>
 <div style="border:1px solid yellow; float:left; width:100px; height:40px">
 a1
 </div>
 <div style="border:1px solid blue; background: blue; margin-left:110px">
 a2
 </div> 
 </div>
 <div style="clear:both"></div>


 <div>текст какойнить текст какойнить текст какойнить текст какойнить </div>

 </div>

</div>

цель: текст должен быть непосредственно под а1 и а2. а получается что а1 обтекается текстом...

clear не помогает... не пойму почему текст завязывается на нижний край левого дива...

как быть?

спасибо.

D.S.Denton · November 13, 2007

попросту игнорируется, ибо пустой

Vlad · November 13, 2007

Приведи картинку или пример, что хотелось бы получить.

maddogrts · November 13, 2007

 <div style="margin-left:300px; background:green">

 <div>
 <div style="border:1px solid yellow; float:left; width:100px;">
 a1
 </div>
 <div style="border:1px solid blue; background: blue; margin-left:110px">
 a2
 </div> 
 </div>
 <div style="float:left">текст какойнить текст какойнить текст какойнить текст какойнить </div>
 <br style="clear:both;" />

 </div>

Попробуй так. Все таки не понятно что ты хочешь

clear не помогает... не пойму почему текст завязывается на нижний край левого дива...

потому что у тебя высота заданна явно.

Orliha · November 13, 2007

попросту игнорируется, ибо пустой

что за бред

——--

две колонки - левая и правая

- в левой колонке - меню

- в правой колонке - блок из трех колонок - а1, а2 и текст

-- а1 слева, а2 справа, текст под ними

-- причем а1 и а2 могут быть разной высоты

-- а1 можно считать фиксированной ширины

в правой части таких блоков из трех дивов может быть сколько угодно (один под другим)

вот картинка: http://zapisi.ru/images/uploads/xxxx.jpg

klierik · November 13, 2007

прочитал пару раз но так и не понял что именно вы хотите )

Orliha · November 13, 2007

прочитал пару раз но так и не понял что именно вы хотите )

на картинке же нарисовано:

вот картинка: http://zapisi.ru/images/uploads/xxxx.jpg

нужен 3-й вариант

maddogrts · November 13, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>
<style>
*{margin: 0;padding:0}
#con {width:500px; display: block; background: #777}
#menu {float: left; width: 200px; background: blue}
#content {float:right;width:290px;background: #ccc}
.box{float: left; width: 90%}
.clear{clear:both}
h2{float: left;background: green;}
h3{background: red; }
.boxS {position: relative}
p{clear:both }
</style>
<body>
<div id="con">
 <div id="menu">Пункты меню <br / > пункты 
пунты 
пунтыка</div>
 <div id="content">
 <div class="box">
 <div class="boxS">
 <h2>a1</h2>
 <h3 style="height: 50px">a2</h3>
 </div>
 <p>Heloo hello heello llo lllm</p>
 </div>
 <div class="box">
 <div class="boxS">
 <h2 style="height: 100px">a1</h2>
 <h3>a2</h3>
 </div>
 <p>Heloo hello heello llo lllm</p>
 </div>
 <div class="box">
 <div class="boxS">
 <h2 style="height: 40px">a1</h2>
 <h3>a2</h3>
 </div>
 <p>Heloo hello heello llo lllm</p>
 </div>

 <div class="box">
 <div class="boxS">
 <h2>a1</h2>
 <h3 style="height: 80px">a2</h3>
 </div>
 <p>Heloo hello heello llo lllm</p>
 </div>
 </div>
 <br class="clear" />
</div>
</body>
</html>

Orliha · November 13, 2007

maddogrts, спасибо, однако

текст

не подходит, нужно

текст

maddogrts · November 13, 2007

напиши див текст див какая разница

maddogrts · November 13, 2007

Heloo hello heello llo lllm

-->

Heloo hello heello llo lllm

.text{clear:both }

Orliha · November 13, 2007

Heloo hello heello llo lllm
-->
Heloo hello heello llo lllm
.text{clear:both }

а! о! про clear я забыл. Спасибо, так уже почти то что нужно... однако con можеть быть разной ширины (например 90%), menu фиксированной ширины нужен, а contnet - тянуться должен

maddogrts · November 13, 2007

)) слушай возми просто готовый макет ))).

Поставь для con ширину 100% для content флоат убери зделай отступы. ширину тоже убери. Должно получится. Изначально задача то другая стояла. Надо сразу было говорить.

Orliha · November 13, 2007

да все пашет. лошу. спасибо.

Orliha · November 13, 2007

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

maddogrts · November 13, 2007

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

и поставив диву в котором все это значения overflow" hidden и zoom: 1;

Dimitry Wolotko · November 13, 2007

В проблемы в?рстки.

Sign In

разобраться с хитрым float помогите

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information