CSS:
Create Column Designs in Your HTML
SolveYourProblem.com Article Series: Web Site Design
So CSS makes layouts easier than they were
with tables there's not really much debate about that. One
of the reasons many people stuck with tables for so long (and,
in fact, still stick with tables to this day) is that it can
be difficult to create column-based designs using CSS. Since
there are so many websites that essentially consist of a middle
column of content surrounded by left and right columns containing
navigation and ads, this was considered to be unacceptable.
The Power of Float
Really, though, CSS columns aren't that difficult to produce
once you understand how CSS float rules work. Float allows
you to say that some parts of your content should 'float' next
to other parts, instead of being displayed one after the next
(that is, underneath each other).
Despite all the fear of column layouts in CSS, it's quite
simple. Basically, the first thing to do is to divide your
content from your navigation using the div tag, like this:
<div id="left-nav"></div>
<
div id="right-nav"></div>
<
div id="main-content"></div>
Note that the divs must be in this order left, right, centre
because otherwise one column might end up underneath another
in a way you don't expect. Ordering things logically as left,
centre, then right, for example, will cause your right column
to end up under the centre one.
Anyway, the next step is to write the CSS for those IDs you
just set up. Are you ready for the CSS that's made old-style
HTML developers run in fear for about five years now? It looks
like this:
#left-nav { float: left; width: 20%; }
#right-nav { float: right; width: 20%; }
Obviously you can adjust the widths depending on how wide
you want your left and right columns to be (you can choose
whether to set the widths as percentages or in pixels). And
that's it! You've set up a successful three-column layout.
Then, though, the problems come they might seem small, but
they're big enough to drive anyone who works on CSS column
layouts nuts. Luckily, however, they can be solved with a little
lateral thinking.
The Background Problem
If you want your left and right columns to be have a different
background colour to the center one, you're in for a problem.
In most browsers, your columns are only considered to extend
downwards as far as the text in them does, which means that
the bottoms of your columns won't line up.
What's the way around this? The best answer is to make your
columns fixed-width (meaning that you specify their width in
pixels, eg. 'width: 100px;'). Once you've done that, you can
create one-pixel-high image that includes the colours you want
for the columns, and make it the background image, tiling it
using 'background: repeat;'.
The only problem left to solve at this point is that fixed-width
columns can look strange if you leave them spaced as they are.
The solution is to specify a fixed width for your document's
body, and then set the left and right margins to 'auto' this
will centre the page on the screen.
The Header and Footer Problem
Another problem? Well, yes. If you want to display a header
or footer separately from the page's columns, CSS can give
you a little trouble sure, you can add them to the middle
column, but that would require you to add extra space to the
navigation columns at the top, and make sure they didn't reach
down further than the main content text at the bottom. It quickly
becomes painful to work with.
The solution to this lies in a little-known CSS rule called
'clear'. The clear rule means that you don't want anything
to be floating around the tag you apply it to. It has three
possible settings: left, right and both.
In this case, you want to add your header and footer before
and after the other divs, like this:
<div id="header"></div>
<
div id="left-nav"></div>
<
div id="right-nav"></div>
<
div id="main-content"></div>
<
div id="footer"></div>
Then you want to add this CSS to what you've got already:
header, footer { clear: both; }
That tells the browser that you don't want anything floating
on either the left or the right of your header or footer: you
want them clear of everything. You might also like to add text-align:
center, so they appear in the middle of the page. And that's
it! What was all the fuss about, eh?
#
# # # #
SolveYourProblem.com : 2007
> Home > Website Design Articles: Main Page
|
