Menu
I've got a parent div floated left, with two child divs that I need to float right.
The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.
In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Float test</title> </head> <body> <div style="border-top:solid 10px #0c0;float:left;"> <div style="border-top:solid 10px #00c;float:right;">Tester 1</div> <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div> </div> </body> </html> Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.
Is there a CSS-only workaround to make the parent div as wide as the child divs?
538
Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.
The parent div in this example will not expand to contain its floated children - it will appear to have height: 0 .
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Answer: Use the CSS clear property When float property applied to the element inside the non floated parent, the parent element doesn't stretch up automatically to accommodate the floated elements. This behavior is typically known as collapsing parent.
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Float with inline-block test</title> <style type="text/css"> .container { border-top: solid 10px green; float: left; } .tester1, .tester2 { float: right; } .tester1 { border-top: solid 10px blue; } .tester2 { border-top: solid 10px purple; } </style> <!--[if lte IE 7]> <style type="text/css"> .container { text-align: right; } .tester1, .tester2 { float: none; zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */ } </style> <![endif]--> </head> <body> <div class="container"> <div class="tester1">Tester 1</div> <div class="tester2">Tester 2</div> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
