»Dotnet Ads
»Message Boards
Message Boards
Dotnet Books
»Member Details
Register
Login
LogOut
Submit Code
Submit Jobs
Submit Projects
»Competition
Community
Winners
Prizes
Write For Us
Members
»Other Resources
Links
Dotnet Resources
|
Column Designs with CSS 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:
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
|