Sent by jordan WOLLMAN on 19 May 2005 19:07
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-REMOVED]>
> Reply-To: Nick Swerdlow [EMAIL-REMOVED]>
> Date: Thu, 19 May 2005 10:38:41 -0700
> To: [EMAIL-REMOVED]>
> 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-REMOVED]]
> 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-REMOVED]]
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/
