On Thu, 19 May 2005 19:48:01 -0400, Andre Andreev wrote:This is a 100% wide 2-column layout with a horzontal menu spawning across the columns between the 2-column header and the 2-column content. The challenge: - have the background color of the left column extend to the left margin of the screen, - and the background color of the R column extend to the R margin - and the menu section extend 100% wide[...] Please see if something like this might meet your need: <http://www.dlaakso.com/two-c-hn.html>
David, in my Firefox, there's a white margin all around your layout, looks like about 5px.
Andre, I would suggest a slightly simpler structure than David's layout:
- give body{} a white background color and a background image of your grey left column, repeat-y. This will extend all the way to the bottom of the screen regardless of the other page elements.
- float left the logo & header, widths defined.
- clear the float with the menu bar, width undefined so its block container (either a div or the UL itself) extends to the right margin of the screen.
- float left the left column of photos and the main column of content, widths defined.
- clear the float with the footer, if you have one, width undefined so its block extends all the way to the right.
<body>
<logo> float left, width 183px
<header> float left, width 610px
<menu> clear left
<photos> float left, width 183px
<content> float left, width 610px
<footer> clear left
</body>I see that you've marked up your table with the column widths in percentages. Do you really want to do this? On a screen with low resolution, the grey left column might become too narrow to contain the photos; with a very high resolution, the photos would become lost in a great sea of grey, and lines of text in the right column would become unreadably wide unless otherwise constrained. Personally I'd keep the left and right columns at fixed widths to maintain the integrity of your layout regardless of screen dimensions.
Regards,
Paul
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
