On Oct 26, 2006, at 6:42 AM, Michael Stevens wrote:
> I've got one <div> with a background color of white for the entire
> page so
> the content centered. A <div> for the header which spans the entire
> width. A
> <div> floated left for the menu and a <div> floated right for the
> content.
>
> <body>
> <div id="page">
> <div id="header">Header Image</div>
> <div id="menu"><a href="#" title="">Menu Item 1</a>...</div>
> <div id="content">Main Content</div>
> </div>
> </body>
>
> #page { background: #ffffff; border: 0px; min-height: 420px;
> margin: 5px
> auto; padding: 0px; width: 975px;}
> #menu { border: thin solid #005883; background: #ffffff; margin:
> 0px; width:
> 150px; text-align: center; float: left;}
> #content { border: thin solid black; margin: 0px; padding: 5px; width:
> 800px; float: right; }
>
> The problem, as most everyone I'm sure knows, is that since the menu &
> content are floated and hence removed from the flow so the white
> background
> in my #page does not flow to encase the menu & content in a compliant
> browser like FF. IE works like I want but we know it really isn't
> working
> right to begin with.
>
> I've kinda solved the problem with the min-height: 420px; and I think
> another work around would be a footer <div> with clear: both; in
> it. I could
> possibly try absolute positioning but I was working on a different
> project
> earlier and trying to use absolute positioning and it seemed to be a
> nightmare between FF & IE and I didn't have any reference materials
> on me
> (gotta do something while the car is getting fixed). But besides
> those two
> workarounds is there another way that I'm not thinking of?
The footer with clear both inside the wrapper is one solution. If you
don't have a 'footer', one solution is to insert a clearing element
at the bottom of your wrapper.
Or, 'easy clearing':
<http://www.positioniseverything.net/easyclearing.html>
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
