Aaron Gray wrote: >> - Float one div left >> - Float one div right >> - Give middle div matching left and right margins >> - Wrap all divs in a container with a minimum and maximum width applied >> >> That's all it takes. Some tweaking necessary for IE, probably, and when >> you start adding in graphics, but the basic structure can be in place in >> five minutes. >> > > Okay, I have spent several hours trying to get this to work, and still > cannot get the right floating div not to hang over on the next line. > > Here's what I have got :- > > http://angray.members.beeb.net/Examples/CSS/ThreeColumnExample.html >
Aaron, The right div has to drop down because of the box model. Borders are added onto the declared width of a box, so your left and right divs each take up 202px of space, not 200px. You need the margins to match or exceed 202px. Alternately, remove the borders. Use backgrounds to troubleshoot instead of borders and you will be a much happier person. :-) I recommend you become very familiar with the box model before you go further with your layout. Here's some recommended reading: http://css-discuss.incutio.com/?page=BoxModel http://www.brainjar.com/css/positioning/default.asp http://www.communitymx.com/content/article.cfm?cid=E2F258C46D285FEE http://www.communitymx.com/abstract.cfm?cid=A33F5 (Thanks for keeping the CSS in the HTML, by the way -- much easier to help that way.) 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/
