You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Anyway, the next step is to write the CSS for those IDs you just set up. Are<br />
you ready for the CSS that's made old-style HTML developers run in fear for<br />
about five years now? It looks like this:<br />
#left-nav { float: left; width: 20%; }<br />
#right-nav { float: right; width: 20%; }<br />
Obviously you can adjust the widths depending on how wide you want your<br />
left and right columns to be (you can choose whether to set the widths as<br />
percentages or in pixels). And that's it! You've set up a successful<br />
three-column layout.<br />
Then, though, the problems come – they might seem small, but they're big<br />
enough to drive anyone who works on CSS column layouts nuts. Luckily,<br />
however, they can be solved with a little lateral thinking.<br />
The Background Problem.<br />
If you want your left and right columns to be have a different background<br />
color to the center one, you're in for a problem. In most browsers, your<br />
columns are only considered to extend downwards as far as the text in them<br />
does, which means that the bottoms of your columns won't line up.<br />
What's the way around this? The best answer is to make your columns<br />
fixed-width (meaning that you specify their width in pixels, eg. 'width:<br />
100px;'). Once you've done that, you can create one-pixel-high image that<br />
includes the colors you want for the columns, and make it the background<br />
image, tiling it using 'background: repeat;'.<br />
The only problem left to solve at this point is that fixed-width columns can<br />
look strange if you leave them spaced as they are. The solution is to specify a<br />
fixed width for your document's body, and then set the left and right<br />
margins to 'auto' – this will center the page on the screen.<br />
The Header and Footer Problem.<br />
Another problem? Well, yes. If you want to display a header or footer<br />
separately from the page's columns, CSS can give you a little trouble – sure,<br />
you can add them to the middle column, but that would require you to add<br />
extra space to the navigation columns at the top, and make sure they didn't<br />
The Web Design Guide for Newbies |55
Change language