HTML and CSS Reference
In-Depth Information
(which means a whole lot of scrolling for no good reason). One method you could employ is to
use JavaScript to calculate the height required for each column. If you are a confident JavaScripter,
this may be a practical solution, but it may go against your principles of markup and code
purity. (The solution would require the JavaScript to calculate the heights of two elements
after page load and then adjust the height attribute of whichever element is shorter.) Besides,
what happens to your layout if you use such a technique but the user has JavaScript disabled?
And it's another thing to maintain, remember!
Instead of setting a height for both the navigation
div
and the content
div
, you could
specify a set height for the container that holds both of these elements. In this case, we mean
the wrapper. This approach results in a slight improvement, but we still have the same issue
regarding the height. Here is an example; we've used a repeating background image that is set
in the outer wrapper container
div
to create a column effect:
#wrapper {
text-align:left;
width:770px;
margin:10px auto 0 auto;
position:relative;
height:600px;
background:#fff url(nav-bg.gif) repeat-y left;
}
You can see the result in Figure 7-5.
Figure 7-5.
We've fixed the left column by applying a height to the outer container and using
a tiled background image.
