Forcing the master block element of a centered fixed-width layout to vertically expand

Last updated on December 15, 2009.

In an earlier tutorial on how to center a fixed with layout (using auto margin), I mentioned that the master block element (usually called "wrap", which contains all the other block elements such as header, navigation, content, etc) tends to shrink vertically when no height is defined as viewed in Firefox, Safari and Chrome, while expanding to accomodate the content in Internet Explorer.

This is usually not the problem because regardless of whether the "wrap" expands or not, the block elements it contains are still more or less in the same in the same position. The only other possible difference in the layout is the doubling of left and right margins when using float when viewed in Internet Explorer (IE) 6; IE7 does not have this problem.

To give you an idea what is this vertically shrinking wrap division that I'm talking about, take a look at the screenshot of a webpage below. This is a screenshot of the actual layout as seen in IE7.

shrink-height-ie7

This webpage has 5-pixel margin on all sides for all the block elements except for the "wrap" (the gray area). The "wrap" is also surrounded by a black 2-pixel border. Here, we can clearly see that the "wrap" expands to accomodate the other block elements, the header, navigation, etc.

Below is the screenshot of the same page again as seen in Firefox. This is also how it appears more or less in Safari and Chrome, although in Safari, it will look like you're viewing it from Mac even if you're using Windows.

shrink-height-firefox

Notice the thick black line on top? That line is actually the "wrap" and all we can see now is the border. It appears that the height was reduced to zero. I don't know why this happens. It happen only when you center the layout using auto margin. It does not happen to layouts that are floated to the left (or right) and to those centered using absolute positioning.

You can view the actual web page used in the two previous illustrations here, thought it will appear totally messed-up in IE6. Fixing layout for IE6 is an entirely different topic and I'm not certain if I will still cover it due to dwindling (but still large) number of IE6 users.

This isn't a big problem if you only intend to use the "wrap" to restrict the block elements to the layout's width (but of course, you need to remove the border and make the background of the wrap transparent). However, if you intend to put some graphical or design elements in the "wrap", you might need to have it expand.

A simple solution is to simply put the attribute overflow: hidden; in the "wrap" block element, or whatever is the name of your master block element.

#wrap {
	width: 500px;
	margin: 0 auto;
	padding: 0;
        border: 2px solid #000000;
	background: #c0c0c0;
	overflow: hidden;
}

The appearance in IE7 does not change, but in Firefox (as well as in Safari and Chrome), the webpage now looks like this.

no shrink height

I think this is the more accurate appearance because as I mentioned earlier, all the block elements except for the "wrap" have margins of 5 pixels. Internet Explorer clearly didn't show the margin at the bottom. This, however, is a minor problem that you can remedy by forcing the bottom margin of the footer to be zero so it appears the same in both IE7 and Firefox.

You can view the webpage in the previous illustration here.

To be honest, I really don't know how this happens. The attribute overflow:hidden; seems totally irrelevant to whether the "wrap" block element shrinks vertically or not. I would find it believable if it's the overflow:visible; attribute that can cause this effect since, well, it's suppose to make more things visible, but no; using this attribute will still shrink the wrap's height as if this attribute is not there.

Another puzzling thing, since the shrinking "wrap" appears in Firefox, Safari and Chrome, does it mean that this is how it is intended by the W3C standards? This happens only when the layout is centered using auto margin. It does not happen if the layout is aligned to left or right, or if the centering was done using absolute position.

At any rate, regardless of the explanation, adding a single line of code is enough to force the master block element to expand its height depending on the amount of content while retaining its width. Whether it makes sense or not, what I presented here is a solution that we can use from time to time but still needs further studies.

Posted by Greten on October 21, 2009 under Cascading Stylesheet (CSS)

Share and Enjoy: