Hi
I have a parent container which is 100%. It contains 2 floating divs which are width:50%. The children conintans only text. The problem is that the children on get as wide as the text, and not 50% of the width of the parent container. It is only ie7 that is a problem. Maybe also ie6, but I don't care about that browser.
ball (width 16px position absolute) parent (width 100% position absolute. Should be more than 16px) child (width:50% float left) child (width:50% float left)
Can someone help
newer mind. I fixed it with some jquery, which sets the width of the parent div dynamic
Thanks anyway
No need for a JS hack. Just use the right doctype.
Copy'n'paste'n'run this, check the result, then remove the doctype and retest in IE.
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
body { width: 300px; }
.parent { width: 100%; border: 1px solid black; overflow: hidden; }
.child { float: left; width: 50%; }
h3 { clear: left; }
</style>
</head>
<body>
<h3>Test 1</h3>
<div class="parent">
<div class="child">text</div>
<div class="child">text</div>
</div>
<h3>Test 2</h3>
<div class="parent">
<div class="child">text text text text text text text text text text</div>
<div class="child">text</div>
</div>
<h3>Test 3</h3>
<div class="parent">
<div class="child">text</div>
<div class="child">text text text text text text text text text text</div>
</div>
</body>
</html>
Without doctype or with a non-standards-mode doctype IE will namely render in quirks mode.