<!doctype html public "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Untitled web-page</title>
<style>
#f1 {
width:50px;
background-color:gray;
float:left;
height:100%;
}
#f2 {
width:100px;
background-color:silver;
float:left;
}
#f3 {
width:50px;
background-color:gray;
float:right;
height:100%;
}
#block {
width:200px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="block">
<div id="f1">
1
</div>
<div id="f2">
<br><br><br>2
</div>
<div id="f3">
3
</div>
</div>
</body>
</html>
Блочная верстка. Задачка
Реально ли сверстать исключительно блоками следующий макет?
Три колонки (три блока соответственно). Два блока по бокам, один по середине. При заполнении блока, который по середине, должны автоматически растягиваться по высоте два соседних блока.
Три колонки (три блока соответственно). Два блока по бокам, один по середине. При заполнении блока, который по середине, должны автоматически растягиваться по высоте два соседних блока.
Можно. Схеме будет приблизительно такая: левый блок float: left, правый блок float: right, средний ни куда не перемещаем и все три блока находяться внутри другого блока. Для левого и правого блоков задаем height: 100%, а у среднего он и так auto.
Я уже так пробывал. Не получается. Фишка в том, что бы при расстяжении вниз среднего блока так же шли вниз два соседних блока как колонки при верстке таблицами. Вот код. Тестировал в ИЕ и ФФ.
Код:
Если высота block-а auto, то да, ни как средствами CSS (т.к. возможна ситуация возникновения бесконечно цикла), только через JS.
Для создания одинаковых колонок есть метод.
Почитайте http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
Почитайте http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
тогда мне кажется такие ситуации лучше решать таблицами :rolleyes: