1 reply [Last post]
Last seen: 19 years 45 weeks ago
Joined: 2003-07-22
Posts: 9
Points: 0

So I want to have something like this:


My questions are as follows...
Should I make everything relative?
I've already done the 2 header's properly (relative) but now I'm confused as to the best way to implement my 3 columns and the footer I want to stay below them. Where do I put floats? I'm sorta new to CSS so any help would be appreciated. I assume I want colum2 to float right from colum1 and column3 to float right from column2. Do I need to use a wrapper DIV to contain my 3 columns?

brucelu's picture
Last seen: 19 years 48 weeks ago
Timezone: GMT-8
Joined: 2003-07-04
Posts: 12
Points: 0

Quick help on overall design of tableless site

When I design structure, i take a few things into account...

1) the natural flow of the document
2) the actual design structure
3) the logical flow of text when styles are disabled

What these refer to is how to content appears on screen, and in the structural markup (the html). For example, by using an absolute positioned DIV tag, you can dictate where the text is placed when the document is printed for example, and still retain design control.

For your particular design, I'd do it this way:

for ID header 1 & 2, they will most likely use the top bottom flow of the document, so you'll problably just add some style to them, color, border, graphic etc...

for ID content, this will help to wrap all of your content, and control how big you want to make it. It's important that the combined widths of your columns do not exceed the width of ID:content

for ID column1 - make it float:left
for ID column2 - make it float:left
for ID column3 - make it float:right

The advantage of using floats is that they'll move with resizing the browser, having said that, sometimes it's a good idea depending on your design, to make the 3rd column an absolute column since resizing goes from right to left.

<div id="header1"></div>
<div id="header2"></div>
<div id="content">
<div id="column1"></div><div id="column2"></div>
<div id="column3"></div>
</div id="footer"></div>