My header features three inline-blocks within a container that is text-aligned center. The left block floats to the left, and the right block floats to the right, creating a visually appealing effect where the middle block's text remains centered on screen regardless of window size.
However, when the window size is greatly reduced, the blocks stack on top of each other as needed. The problem arises because of the floats - they do not smoothly transition into position. Instead, the right-most block sticks to the right side with a large white space to the left. Similarly, the middle block doesn't adjust either due to the text-align property being set to center. This results in a "stair/stepped" appearance on screens that are somewhat small but not small enough to force full stacking.
For a visual representation of the issue, refer to this js fiddle: 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;
}
While I understand that this behavior is expected, I am exploring ways to achieve my desired layout (three horizontal containers—one fixed to the left, one fixed to the right, and one centered—that neatly stack as the window shrinks) using only CSS. Is there a solution for this scenario?