1-й вопрос: хочу сделать DIV-ми некое подобие разбиения страницы на блоки. Цель: Понять, какими свойствами пользоваться, для верного представления - как будут расположены блоки DIV. Вот сначала разбиваю, всё норм: Код: <html> <head> <style> #body {min-width:8000px; } /*Заголовок*/ .header { width:100%; text-align:center; border: 1px dotted gray; } /*Левая колонка*/ .block_1_1 /* 1.1 */ { float:left; width: 20%; border: 1px dotted #ccc; overflow:hidden; } /*центр - контент*/ .block_1_2 { margin: auto; /*Выравниваем между девой и правой колонкой*/ width: 60%; border: 1px dotted #ccc; text-align: center; background:orange; } /*Правая колонка*/ .block_1_3 /* 1.3 */ { float:right; width: 20%; border: 1px dotted #ccc; } /*Левая колонка */ .block_2_1 /* 2.1 */ { float:left; width: 20%; border: 1px dotted #ccc; overflow:hidden; } /*центр - 2*/ .block_2_2 /* 2.2 */ { margin: auto; /*Выравниваем между девой и правой колонкой*/ width: 60%; border: 1px dotted #ccc; text-align: center; background:orange; } /*Правая колонка 2*/ .block_2_3 /* 2.3 */ { float:right; width: 20%; border: 1px dotted #ccc; } /*Подвал*/ .block_3_1 { width: 100%; height: 50px; background: #ccc; border: 1px dotted #ccc; clear:both; } </style> </head> <body> <div class="header"> </div> <div class="block_1_1"> 1.1</div> <div class="block_1_3"> 1.3 </div> <div class="block_1_2"> 1.2 </div> <div class="block_2_1"> 2.1</div> <div class="block_2_3"> 2.3 </div> <div class="block_2_2"> 2.2 </div> <div class="block_3_1"> 3.1 </div> </body> </html> Результат: А затем, если что нибудь пишу например в блоке 1.1, то блок 2.1 съезжает Вправо, а хотелось бы, чтобы он оставался внизу, под 1.1! То есть сохранялась структура! Как этого добиться?? Вот, посмотрите: http://elastic.narod.ru/ScreenShot029.jpg ===================================================== Задача номер Два: Хочу сделать Заголовок таким образом: Основной слой (Header) - растягиваю на всю ширину. Внутрь него помешаю ещё Пять DIV для разных целей, разного размера, и использую FLOAT для расстановки блоков. Что не получается: Последний блок (в коде он зовется <div class="h_02">i5</div>) выезжает за нижнюю границу основного блока! Код HTML+CSS и принтскрин ниже. Вопрос: Как разместить эти Пять Div-oв так, чтобы 3 первые были слева, 4-й посередине, а 5-й справа (см. рисунок ниже). Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #body {min-width:8000px; } /*Заголовок*/ .header { width:100%; text-align:center; border: 1px dotted gray; } .icon1{width: 15px;height:15px;border:1px dotted gray;float:left;} .icon2{width: 15px;height:15px;border:1px dotted gray;float:left;} .icon3{width: 15px;height:15px;border:1px dotted gray;float:left;} .h_01 {width:80%;height:150px;margin:0 auto;border:3px dotted;} .h_02 {width:10px;height:100px;border:3px double;float:right;} </style> </head> <!-- ТЕЛО --> <body> <div class="header" align="center"> <div class="icon1">i1</div> <div class="icon2">i2</div> <div class="icon3">i3</div> <div class="h_01">i4</div> <div class="h_02">i5</div> </div> </body> </html> Результат:
