How interesting. I ran across this issue earlier while working on my companies corporate site. My solution: Put a div after your two floated divs with clear:both; applied: That seems to work for me.
> <div id=�container�> > > <div id=�column_left�> > CONTENT > </div> > > <div id=�column_right�> > CONTENT > </div> > > <div id=�clear_both� style=�clear:both;�></div> > > </div> Sincerely, Jordan WOLLMAN // Ariamedia Corporation Creative Director T : (214) 382-2650 | M : (214) 208-8563 14679 Midway Rd. Suite 219 Addison, TX 75001 www.ariamedia.com > From: Nick Swerdlow <[EMAIL PROTECTED]> > Reply-To: Nick Swerdlow <[EMAIL PROTECTED]> > Date: Thu, 19 May 2005 10:38:41 -0700 > To: <[email protected]> > Subject: [css-d] Aligning DIVS inside a DIV using floats makes container DIV > disappear (Firefox) > > Hi everyone, > > This CSS quirk has been bugging me for several days and I really dont > want to resort to using tables. Please help, if you can. > > Summary: > Aligning 2 DIVS inside a DIV using floats makes the floated DIVS > render outside the boundaries of their container DIV (on Firefox > 1.0.4) > > In Detail: > I have 2 DIVs inside a master container DIV. I want one of the DIVS on > the left, the other on the right. Easy enough. I can float them left > and right respectively. > > Now the problem is, in IE everything looks fine. Firefox however > renders the master DIV and then renders the 2 contained DIVS outside > it. My code is attached. If anyone has any ideas on why Firefox is > doing this or if my CSS is just plain wrong, please let me know. > Thanks in advance. > > My Code: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > <html> > <head> > <style> > #searchResultsContainer > { > width: 849px; > border: 1px solid gray; > } > #refineResultsContainer > { > width: 200px; height: 100%; > border: 1px solid gray; > border-collapse: collapse; > margin: 5px; > font-size: 12px; > font-family: arial; > margin: 0px; > position: relative; top: -1px; left: -1px; > float: left; > } > #searchResultsArea > { > float: left; > width: 645px; > border: 1px solid red; > > } > </style> > <title></title> > </head> > <body> > <div id="searchResultsContainer"> > > <div id="refineResultsContainer"> > <div style="background-color: #e4f4e7; margin: 5px; font-size: > 12px; height: 100%;"> > <div>refine:</div> > > </div> > </div> > <div id="searchResultsArea"> > <div id="frontpageTagline"> > <h1 class="taglineTitle">tagline</h1> > Tagline filler text in here. Ipsum Lorum. > </div> > asdfaSD > </div> > </div> > </body> > </html> > ______________________________________________________________________ > 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/ ______________________________________________________________________ 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/
