Re: [WSG] Trouble with float layout (IE6 versus Firefox)

Thu, 07 Sep 2006 08:53:52 -0700

Thanks to Kepler for tinkering with the CSS and to everyone else for their input on this.
 
The html below allows the floated divs on the right to stack when resolution gets to 600x800.
 
(in both FF and IE6 Win)
 
The primary containers needed % widths and there needed to be enough extra room in these divs so that when the resolution is 600x800 the individual child divs do not overflow their containers and cause browser-specific weirdness in IE6
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Stacking Floats</title>

<style>
* { margin:0px; padding:0px }
body { margin:20px }
div { padding:2px }
div#content { border:solid 1px black; width:100% }
div#leftArea { width:54%; float:left; display:inline; border: solid 1px red}
div#leftArea div { width:390px; background-color:#A0A0A0 }
div#rightArea { width:44%; float:right; display:inline; border: solid 1px blue}
div#rightArea div { width:205px; float:left; display:inline; background-color:green }
br.clearBoth { clear:both }
</style>

</head>
<body>
<div id="content">

<div id="leftArea">
 <div>
   Left Area
 </div>
</div>

<div id="rightArea">
 <div>
   First Right div
 </div>

 <div>
   Second Right div - for 800x600 resolution this div drops for display in viewable area
 </div>
</div>

<br class="clearBoth" />
</div>
</body>
</html>



 
On 9/6/06, Kepler Gelotte <[EMAIL PROTECTED]> wrote:
> in your testcase, Firefox, Safari, Opera and other modern browsers
> drop the whole box containing [green div 1] and [green div 2]. That
> is the correct behaviour in this case: the width of the floated
> parent is not specified, and depends on the width of the content
> (known: the width+padding+border+margin of the 2 floated  green divs;
> the width for those divs is specified).

If you float the child div's right instead of left as in:

div#rightArea div { float:right; width:220px; background-color:green;
margin:2px }

the parent <div id="rightArea"> takes on a width of 100% in FireFox.

In Opera the body definition:

body { margin:20px }

causes the top margin to jump between 20px and 40px when you resize the
window both horizontally and vertically.

I guess all browsers have their quirks.




*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to