Решил заняться div`ной вёрсткой, и сразу же столкнулся со следующими проблемами: 1) див с id="bottom" должен быть в самом низу, но он оказывается под правыми блоками. Подскажите, как это исправить? 2) главный див, в котором всё находится не растягивается и в нём только шапка(( 3) как сделать, чтобы правые и левые блоки были статической ширины, а вот средний растягивался на всё оставшееся место? HTML: <html> <body> <div id="main" style="height: auto; width: 99.5%; border: 1px solid black;"> <div style="border: 1px solid red; height: 60px; width: 100%; margin: 0 0 10 0;"> Шапка </div> <div style=" border: 1px solid green; height: auto; width: 150px; float: left; margin: 0px 10px 0px 10px;" > Левые блоки </div> <div style="border: 1px dotted #B9BCBE; height: auto; width: 59%; float: left;" > content content content content <br> content content content content <br> content content content content <br> </div> <div style="border: 1px solid black; height: auto; width: 200px; float: left; margin-left: 10px;"> Правые блоки </div> </div> <div id="bottom"> А вот это должно быть внизу </div> </body> </html> Все проблемы только в FF. Заранее большое спасибо
примерно вот так: HTML: <html> <style> * {margin:0; padding:0; border:0;} html {height:100%;} body {position:relative; margin:0 auto; min-height:100%; height:auto !important; height:100%;} #head {height:60px; border: 1px solid red;} #left, #content, #right {float: left; padding-bottom:50px;} #left {width:150px; border: 1px solid green; padding:10px;} #content {width: 59%; border: 1px dotted #B9BCBE; padding:10px;} #right {width: 200px; border: 1px solid black; margin-left: 10px;} #bottom {position:absolute; left:0; bottom:0; height:50px;} </style> <body> <div id="head"> Шапка </div> <div id="left" > Левые блоки </div> <div id="content"> content content content content <br> content content content content <br> content content content content <br> </div> <div id="right"> Правые блоки </div> <div id="bottom"> А вот это должно быть внизу </div> </body> </html>
andrvm, я наверно неправильно сформулировал вопрос. - в смысле под всеми блоками, а не внизу видимой части как сделать чтобы было не 59%, а всё оставшееся место. т.е. 100% - ширина левого блока - ширина правого блока?
сделать клиринг под самым последним блоком (перед bottom), убрать тогда стили для bottom: HTML: <p style="clear:both"><!-- clearing --></p> перевести всю ширину в %, к сожалению css не умеет так считать:ширина левого блока - ширина правого блока, да еще с пикселами и процентами в перемешку.