Trevor Boult wrote:
> I'm currently re-designing my Agriculture site
> (http://www.ukagriculture.com) and wanted to know what is regarded as the
> best fluid "3 column, header and footer" layout.
> I seem to be in-undated with choices and can't work out which is the best
There is no one best option, but there are better and worse options
based on your design requirements.
Do you need all three columns to be fluid, or just the center one?
Do you need a minimum and/or maximum width?
Will any of your columns contains large, unbreakable content (such as
images or tables)?
Does the footer need to span all three columns or just the middle one?
Does the footer need to appear in the viewport at all times?
Do the columns need to appear equal in height?
Is search engine optimization very important?
> My dev pages are here http://www.tboult.co.uk/dev/ag/
> I seem to have issues with my current choice regarding the header not being
> consitent in IE and Firefox.
> This impacts the menu (DHTML menu builder) on the countryside page linked
> from the index page (the only link currently working). I have left a 1px
> border on the top div to see the difference.
To get the display more consistent, I would work on improving the
underlying structure first. Your XHTML could use some work. First, I
would switch to HTML 4.01, since you have a number of validation errors
for XHTML currently. If you don't need to use XHTML, and aren't yet
familiar with its high standards or ready to conform to them strictly,
HTML is a better (and perfectly acceptable) option.
Once you switch to HTML, you still need to fix the validation errors
that remain. The most important one is to get that style element out of
the body and into the head.
Next, I would change all those classes on your layout divs to ids, and
change the id names to more intuitive names. For instance, change
..column-one to #global-links or something similar.
Next, work on improving your semantic markup. For instance, mark up all
the headings (such as the words "Topics" in the left col) as headings
from h1 to h6. Mark up all the lists (such as the list of links in the
header) as lists. This will allow you to greatly simplify your markup.
For instance, your header currently has this markup:
<div id="wrapper"> <form method="post" action="search/search.cfm">
<div id="divLeftheader"><h1>UK Agriculture</h1>Farming & the Countryside - whats going on and
<div align="right">Home About Us Terms
<div align="right"><br /><br /><br /><input type="text" name="criteria" size="25"
maxLength="50"> <input type="submit" value="Search"></div>
You could remove several of these divs and simplify the markup to this:
<div id="site-name"><h1>UK Agriculture</h1><h2>Farming & the Countryside - whats going on and
<form method="post" action="search/search.cfm">
<input type="text" name="criteria" size="25" maxLength="50"> <input type="submit"
You can then use one of the methods in this article to get the header
content to split between the left and right:
That should get you started.
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/