quickreg
-
Posts
5 -
Joined
-
Last visited
quickreg's Achievements
Explorer (1/14)
0
Reputation
-
Так тут такой вопрос если вот например используем данные варианты решения то <div> который внутри он не будет расширятся на 100% по ширине? если нет то как сделать чтобы он расширился на ширину родительского div?
-
Спасибо попробую разобраться я так понимаю лучше использовать два float: left просто когда я использую один у меня внутри контента уже не получится использовать clear... все съезжать будет...
-
вот даже более наглядный пример проблемы... <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { float: left; background: #fc0; width: 200px; } #conteiner2 { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol2 { float: left; background: #f0f0f0; width: 80px; } #rightcol2 { float: left; background: #fc0; width: 80px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> <div id="conteiner2"> <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> </div> qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe </div> </div> </body></html> Вот и второй вопрос всплыл почему див левый стал расширять внутренние дивы??? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { margin-left: 700px; background: #fc0; width: 200px; } #conteiner2 { border: 2px solid #0F0; background-color: #090; } #leftcol2 { float: left; background: #f0f0f0; width: 80px; } #rightcol2 { background: #fc0;margin-left: 82px;width: 80px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> <div id="conteiner2"> <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> <div style="clear:both"></div> </div> qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe </div> </div> </body></html>
-
И всетки как правильно пользоваться float и clear чтобы не глючило??? просто когда мы внутри этих дивов засовываем конструкции из 2 div с float корневой div начинает глючить и он не раздвигается по высоте становится в 0 пикселей как от этого избавиться? да и когда используешь clear:both то он зачемто берет высоту предыдущего float и раздвигает див на высоту div который стоит еще на 2 уровня выше который float:left что за ерунда? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { float: left; background: #fc0; width: 200px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> </div> </body></html>
-
Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутренний к примеру такой вариант <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #container { border: 5px solid #444444; /* Общая ширина макета */ margin: 0 auto; /* Выравниваем по центру */ } #leftcol { float: left; background: #f0f0f0; width: 600px;background-color: #333; } #rightcol { float: left;margin-left: 10px; background: #fc0; width: 200px;background-color: #555555; } #leftcol2 { float: left; background: #f0f0f0; background-color: #333; } #rightcol2 { margin-left: 10px; background: #fc0; width: 100px;background-color: #555555; } .clear { clear: left; } </style> </head> <body> <div id="container"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br> <div style="clear: both"></div> <div style="border: 3px solid #09F;"> <div id="leftcol2">leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br></div> <div id="rightcol2">rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br></div> </div> <div style="clear:both"></div> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> </div> <div id="rightcol">Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br></div> <div class="clear"></div> <p>Текст</p> </div> </body></html>