Получение div для правильного расширения

Question

Последние пару часов я потратил на изучение каждого метода компоновки, чтобы придумать, как это работает. Код, с которым я работаю, находится ниже:

<!-- Begin Wrap -->
<div id="wrap">

    <!-- Begin contentWrap -->
    <div id="contentWrap">

    <!-- Begin statementDiv -->
    <div id="statementDiv" class="transparent blackText">

        <p>
        ART<br>
        CULTURE<br>
        F<span class="miniMargin">A</span>SHION<br>
        THEBLACK<br>
        COLLARWORKER<br>
        </p>

    </div>
    <!-- End statementDiv -->

<!-- Begin miniWrap -->
<div id="miniWrap">

    <!-- Begin socialDiv -->
    <div id="socialDiv" class="transparent marginRight">
    </div>
    <!-- End socialDiv -->

    <!-- Begin navButtons -->
    <div id="navButtons" class="floatLeft">
            <img src="images/buttons/gallery.png" class="marginRight">
            <img src="images/buttons/blog.png">

        </div>
        <!-- End navButtons -->

    </div>
    <!-- End miniWrap -->

    <!-- Begin fillDiv -->
    <div class="fillDiv transparent blackBG"></div>
    <!-- End fillDiv -->

    </div>
    <!-- End contentWrap -->

    <!-- Begin Footer -->
    <div id="footer">

    </div>
    <!-- End Footer -->

</div>
<!-- End Wrap -->

и CSS:

#wrap {height: 100%; width:100%; display: table;}
#miniWrap {height: 41px; width: 362px; float: left; display: table-cell;}
#navButtons {position: relative;height: 41px;float: left;}
#contentWrap {position: absolute;   bottom: 0;  float: left;    display: table-row;}
#socialDiv {height: 41px;float: left;}
#statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;}
.fillDiv {width: 100%;height: 41px;display: table-cell;} 
.miniMargin {margin: 0 -3px;}
.marginRight {margin-right: 3px;}
.floatLeft {float: left;}
.blackText {color: #0d0601;}
.blackBG {background: #0d0601;}

Я ходил туда-сюда, меняя макет настолько, что по неосторожности еще больше нарушал дизайн. Любые советы или предложения будут с благодарностью.

То, что я надеюсь сделать, это чтобы операторы StatementDiv, miniWrap и fillDiv находились на одной горизонтальной линии. Два левых элемента имеют статический размер. Я хотел бы, чтобы третий div (fillDiv) автоматически расширялся, чтобы заполнить оставшиеся необходимые%.

Авто заставляет div идти до 0 в ширину, и 100% заставляет линию опускаться под другими div.

Answer 1

Мое предложение: http://jsfiddle.net/7XPGa/

Answer 2

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

Дайте #contentWrap черный фон, добавив класс .blackBG и установите его ширину равной 100%, затем присвойте #statementDiv и #miniWrap белый фон.

Таким образом, главное - дать контейнеру цвет фона, который вы хотели бы видеть в .fillDiv, а затем переопределить его в

s, которые находятся внутри контейнера. После этого вы можете избавиться от .fillDiv, поскольку он, кажется, просто заполняет пространство цветом.

Answer 3

jsfiddle, который, я думаю, делает то, что вы ищете: http://jsfiddle.net/gWPXF/