Tue, 2003-07-22 17:46
So I want to have something like this:
<--Header1------------------------>
<--Header2------------------------>
<column1><column2><column3>
<--Footer--------------------------->
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?
Tue, 2003-07-22 18:49
#1
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>
</div>