I have a header that contains three inline-blocks. The element containing these blocks is

Question

0

Asked: June 11, 20262026-06-11T09:28:46+00:00 2026-06-11T09:28:46+00:00

I have a header that contains three inline-blocks. The element containing these blocks is

0

I have a header that contains three inline-blocks. The element containing these blocks is set to text-align center, the left block floats left, and the right black floats right. This results in a nice effect such that the middle block’s text gets centered on screen, (almost) regardless of window size.

If you make the window much smaller, the blocks stack on top of each other…which is what I need. The issue is that, because of the floats, they do not “jump” into position. I.e., as the blocks shift from horizontal to vertical to stack on top of each other, the right-most block sticks to the right side (leaving a big white space to the left). And the middle block, because of text-align: center, doesn’t jump over either. So I’m left with a “stair/stepped” effect on screens that are small, but not small enough to force a full stacking.

Check out this js fiddle to see what I mean: http://jsfiddle.net/fphzY/15/

HTML:

<div id="top">

    <div class="topBox">
        <div id="companyLogo">
            IMG
        </div>
    </div>

    <div class="topMiddleBox">
        <div id="shortcuts" class="headerList">
            List of Links
        </div>
    </div>

    <div class="topRightBox">
        <div id="welcome">
            Links
        </div>
        <div id="globalLinks">
            Links
        </div>
    </div>

</div>

CSS:

#top{
 padding:0;
 text-align:center;
 vertical-align:top;
}

.topBox{
    min-width: 100px;
    min-height: 100px;
    background-color:#ccc;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    float: left;
}

#companyLogo {
    margin: 15px 0px 10px 20px;
    vertical-align: top;
    background-color:#000;
    color:#fff;
}

.topMiddleBox{
    min-width: 100px;
    min-height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background-color:#66CCFF;
}
#shortcuts{
    display: inline;
    background-color:#000;
    color:#fff;
}

.topRightBox {
    min-width: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    float: right;
    margin-top: 27px;
    background-color:#FF8000;
}

#welcome 
{
    font-weight: normal;
    margin: 23px 20px 0px 0px;
    text-align:right;
    color: #424242;
    font-size: 10pt;
    background-color:#000000;
    color:#ffffff;
}

#globalLinks
{
    margin: 7px 20px 0px 0px;
    vertical-align: middle;
    text-align: center;
    padding:5px 2px 0px;
    background-color:#FFFF66;
    color:#000000;    
}

#globalLinks ul 
{
    list-style: none;
    padding: 0;
    margin-top: -5px;
    margin-left: 0;
}
#globalLinks ul li
{
    padding: 0;
    margin-left: 3px;
    display:inline;
}
#globalLinks ul li span
{
    padding-right: 2px;
}

Now, I know this is expected behavior, but I’m trying to find a way to achieve my goals (three horizontal containers–one stuck to the left side, one stuck to the right, and one centered–that stack nicely on top of each other as the window shrinks) using just CSS. Is this possible?