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 > option. >
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? Etc. > 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 class="box-header"> <div id="wrapper"> <form method="post" action="search/search.cfm"> <div id="divLeftheader"><h1>UK Agriculture</h1>Farming & the Countryside - whats going on and why?</div> <div id="divRight1"> <div align="right">Home About Us Terms Submit-URL E-Card</div> </div> <div id="divRight2"> <div align="right"><br /><br /><br /><input type="text" name="criteria" size="25" maxLength="50"> <input type="submit" value="Search"></div> </div> </form> </div> </div> You could remove several of these divs and simplify the markup to this: <div id="header"> <div id="site-name"><h1>UK Agriculture</h1><h2>Farming & the Countryside - whats going on and why?</h2></div> <div id="site-nav"> <ul><li>Home</li><li>About Us</li><li>Terms</li><li>Submit-URL</li><li>E-Card</li></ul> <form method="post" action="search/search.cfm"> <input type="text" name="criteria" size="25" maxLength="50"> <input type="submit" value="Search"> </form> </div> </div> You can then use one of the methods in this article to get the header content to split between the left and right: http://www.communitymx.com/abstract.cfm?cid=529B0 That should get you started. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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/
