I’ve spent the last couple hours researching every layout method I can think of

Question

0

Asked: May 24, 20262026-05-24T13:34:26+00:00 2026-05-24T13:34:26+00:00

I’ve spent the last couple hours researching every layout method I can think of

0

I’ve spent the last couple hours researching every layout method I can think of to get this to work. The code I’m working with is below:

<!-- 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 -->

and the CSS is:

#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;}

I’ve gone back and forth changing the layout so much I’ve inadvertently broken the design more. Any tips or suggestions would be greatly appreciated.

What I am hoping to accomplish is to have statementDiv, miniWrap, and fillDiv to on the same horizontal line. The two left divs have a static size. I would like the third div (fillDiv) to auto expand to fill the remaining % needed.

Auto makes the div go to 0 wide, and 100% causes the line to drop under the other divs.