HTML and CSS Reference
In-Depth Information
■
Note
It is possible to use floated elements to achieve a similar effect. If the screen is big enough, the
extra column floats back up into view, but if not, the column wraps. This is a difficult effect to pull off con-
vincingly without it appearing to be a bug, though!
We won't cover this technique in detail, but Simon explains how it's done here:
www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
.
Two Columns or Three?
So far we've seen a simple two-column design at work using various layout methods. What if
we want to add in another column or two? In theory it's just a matter of doing your sums cor-
rectly and making sure the figures don't add up to more than 100 percent. But as you add more
columns to your design you may well run into issues regarding the source order (in other words,
the order in which the different sections appear in the HTML source) and the display of those
columns. Let's see how adding columns works in an example page.
Say we want to add to the content area a new column for related links. To do this, we'll
place the column inside the content's outer container (
content-wrapper
); then we'll use a float
to push the main content over to one side of that
content-wrapper
. The related links will be
floated on the other side. Here's the CSS with relevant parts highlighted in bold:
body {
margin:10px 40px;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
width:75%;
}
#content-inner {
width:70%;
padding-left:15px;
float:left;
}
