0

Внутри блока container есть три блока с фиксированой шириной. Блоки left и right — "прижаты" к краю (используя float или же абсолютную позицию), их высота зависит от наполнения (текста внутри).

<div id="container">
   <div id="left">left</div>
   <div id="right">right<div>
   <div id="main">body</div>
</div>

Как правильно прописать css, что-бы высота блока main зависила от наполнения, но была не меньше, чем максимальная из высот двух боковых блоков?

1 ответ 1

1

Валить таблицей, просто и кросбраузерно.
Но если не хочешь таблицей, то по идее можно так:

<html>
<head>
<style>
#container {
    width: 1000px;
    height: 500px;
    float: left;
    margin-left: 10px;
}
#main {
    width: 500px;
    float: left;
    margin-left: 250px; /* отступ на ширину левой колонки */
    background: red;
            position: relative; /* фикс бага для ie */
}
#text {
    width: 100%;
    float: left;
}
#left {
    width: 250px;
    float: left;
    margin-left: -250px; /* ставим левую колонку на своё место */
    background: green;
            position: relative; /* фикс бага для ie */
}
#right {
    width: 250px;
    float: right;
    margin-right: -250px; /* ставим правую колонку на своё место */
    background: yellow;
            position: relative; /* фикс бага для ie */
}
</style>
</head>
<body>
<div id="container">
   <div id="main">
       <div id="left">
           left<br />
           left<br />
           left<br />
           left<br />
           left<br />
           left<br />
           left<br />
       </div>
       <div id="text">
           body
       </div>
       <div id="right">
           right<br />
           right<br />
           right<br />
           right<br />
           right<br />
       <div>
   </div>
</div>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.