Просто для будущих вариантов;)

отаю над сайтом, который использует две колонки внутри контейнера. Контейнер имеет белый фон, который должен растягиваться до нижней части столбца, поэтому я используюСвятой Грааль метод для этого.

Однако оба столбца должны располагаться так, чтобы часть их превышала белый фон (этот пример использует фиксированную высоту, которая должна быть жидкой). Насколько я знаю, это можно сделать только установив видимый переполнение, но это нарушит равную высоту столбцов.

Как мне исправить это с помощью как можно меньшего количества дополнительных элементов?

Ответы на вопрос(2)

inline-block элементы ..

Css

.container{
    width:300px;
    background-color:#ccc;
    margin:0 auto;
    border:1px solid red;
}
.container > div{
    width:150px;
    display:inline-block;
    vertical-align:top;
}
.inner{
    background-color:#666;
    margin-top:10px;
    width:130px;
}
.left .inner{
    margin-left:-10px;
}
.right .inner{
    margin-right:-10px;
    margin-left:auto;
}

HTML

<div class="container">
    <div class="left">
        <div class="inner">left 1st inner panel</div>
        <div class="inner">left 2nd inner panel</div>
    </div><div class="right">
        <div class="inner">right 1st inner panel</div>
        <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
    </div>
</div>

посмотреть демо

 Stephan Muller06 янв. 2011 г., 17:38
Другой ответ уже сработал, но +1 за хорошее решение. К сожалению, я все еще должен поддерживать IE7 (слава богу, нет 6), который не может хорошо обрабатывать встроенные блоки.
 Gabriele Petrioli06 янв. 2011 г., 18:02
@ Стефан, слава богу, что IE6 наконец-то вышел из картины ... Что касается IE7 иinline-block посмотри наbrunildo.org/test/InlineBlockLayout.html Просто для будущих вариантов;)
Решение Вопроса

<br style="clear:both" /> перед закрывающим тегом для#container.

Вы можете изменить это на<br class="clearfix" /> а также.clearfix{clear:both} если хочешь.

 Stephan Muller06 янв. 2011 г., 17:04
Вау, это было так просто? Я всегда старался избегать пустых элементов clearfix (в 99% случаев есть более элегантное решение), но это, очевидно, исключение из этого правила. Спасибо!

Ваш ответ на вопрос