The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScript
Page 1 of 3 When designing a web page, a very important factor is width. More specifically, how wide will your page content appear on the screen? This is not a trivial question because users may set their screen resolution to a variety of pixel widths, and you have no control over that decision.
If you do not assign an overall width to your page (via some kind of wrapper element), it will fill the user's browser window, which puts the true content width under their control. Thus your page is considered to be "liquid" and might be squashed down quite thin or widened out tremendously. You have no way to know, and the page will have to be designed so it displays acceptably both ways.
A particularly bad issue that can occur in liquid designs is text lines that get stretched out to absurd lengths, making it difficult to read the text. Conversely, too much content fit into a narrow space can make line lengths short, and again difficult to read.
A very common design method is to surround the content with a "wrapper" element of some kind, and set a width on that wrapper. You may use a pixel, EM, or percentage width, each with its own problems.
A "rigid" pixel-width wrapper will keep the page content at a constant width, but a very wide browser window will show lots of extra space to the sides of the rigid wrapper. However, if the window is made narrower than the wrapper, there will be some horizontal scrolling which most users really dislike.
EM widths for the wrapper element are better than pixels when the user adjusts the text size; the size of the container will adjust, hopefully keeping things in proportion.But otherwise, they are no better than pixel widths because horizontal scrolling can still occur.
A percentage width on the wrapper is a bit of an improvement, because while the content width may vary somewhat, there is also less wasted side space in the wider browser windows. Another improvement to this layout type is to set a minimum pixel width on the wrapper element using the CSS min-width property. This will cause the width of the element to "lock up" at some minimum predefined width, keeping content from being crushed down too narrow for comfort.
Sadly, Internet Explorer browsers for both Windows and Mac do not support the min-width property as of this writing (mid-2005). Since IE5/Mac is no longer in development, it is unlikely that the browser will ever support the property. Future support for the property in IE/Win is unknown. Currently, many coders resort to JavaScript or other scripting solutions to simulate support for min-width in these browsers. Script-enabled solutions can work but sometimes lead to various bugs, and using a script for layout purposes is not always desirable.
What if there were some method of CSS layout that had a "natural" min-width that IE browsers could support? How useful would that be? Yes, you're all correct, the answer is "Very useful indeed!" Is there such a method? Indeed there is, and it was recently invented by two coders, Mike Purvis and Stu Nicholls. These gentlemen independently developed the negative margining trick we will be discussing. Mike went even further, providing a way to make the layout moldable (like Jello) so that it flexes in a customizable manner. We'll be getting into the complete Jello Mold method in Part Two of this series.
Be aware that while this method of layout is a bit tricky to understand, it is not that complex to code and it works very well across modern browsers, including IE5/Win and up.
The first step of the natural min-width method is to place sizable side paddings on the body element. This forces any content within the body to display between those paddings, but more importantly, such side paddings will make it impossible for the body to be squeezed any smaller than the combined widths of those paddings. If you select 200px for the size of the left and right body paddings, the page can never be narrower than 400px. When the page is viewed in a window that is narrower than 400px, a horizontal scrollbar appears, just as happens when body {min-width: 400px;} is viewed in a modern, non-IE browser.
By setting these side body paddings, we have just set an "automatic" min-width that all browsers will recognize. But what good is a page where all the content is pushed in by 200px on each side? If the window is narrowed down to 400px, there will be no room left for any content! Clearly something else is needed.
The next step is to insert a full wrapper DIV into the body, and call it .expander. That DIV has {width: auto;} by default, so it will fill whatever body content area is available, but won't go into the body padding areas.
Now we apply a CSS trick called negative margining to the sides of .expander so that they are "pulled" out to the sides by the same distance as those body paddings:
The HTML
<body>
<div class="expander">
Some page content...
</div>
</body>
The CSS
body {
padding-left: 200px;
padding-right: 200px;
}
.expander {
margin-left: -200px;
margin-right: -200px;
}
Code Block 1
The result of this is that the .expander DIV now covers the entire body width and the side padding areas as well. The display is exactly the same as if the body had no .expander inside and had no side paddings, with one single exception. Specifically, the body can now never be narrowed to less than 400px! If you do narrow it to that width, the content area shrinks to zero width and so does our DIV. Yet .expander retains its 400px of negative margining, so it still fills the window. We think that's pretty neat!
Before we go further, we need to make sure that the concept of negative margins is clear, so that what we just explained won't be so mysterious. For those of you who are already familiar with this technique, consider this just a little refresher course focused on the specific application of negative margins to this particular type of layout. Mini-tutorial time!
Keywords
CSS, Jello Mold, min-width, max-width, negative margins, position: relative, width, liquid, liquid layout, wrapper, holly hack, layout, padding
