Forum Moderators: not2easy
In general, I have block-element container positioned absolutely, let's say a <div>, with defined width, for instance 150px. Now, inside that div I am floating to the left some other elements, let's say 3 another <div>'s. Now, all I want is that these three floated <div>'s will automatically expand to their parent container's width.
But,... there is always a but! :)
[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test Case</title>
<style type="text/css">
#container {
position:absolute;
padding:2px;
width:150px;
top:100px;
left:100px;
border:1px solid black;
text-align:center;
}
#smallBox, #box1, #box2, #box3 {
margin:2px;
padding: 2px;
display:inline; /* The IE Doubled Float-Margin Bug (google it and you will find why) */
border:1px solid black;
}
#smallBox { float:right; }
#clearRight { clear:right; }
#box1 { clear:right; }
#box1, #box2, #box3 { float:left; }
</style>
</head>
<body>
<div id="container">
<div id="smallBox">small :)</div>
<div id="clearRight"></div>
<div id="box1">text</div>
<div id="box2">text</div>
<div id="box3">text</div>
</div>
</body>
</html>
[/pre]
You will have to assign widths to the inner <div>'s in %. However, it cannot simply be say 33% 34% and 33%. You have to take into consideration the container's padding as well as any margins, padding and borders of the inner <div>. Therefore, the widths may actually be 31% 32% and 31% so they don't float below one another. The width setting are just guidelines and not necessarily what you need. This would apply too if you use pixels to assign widths.
Marshall
By now, I have some other solution which I am not satisfied with:
I did the vice versa solution. i.e.: didn't defined width for the container, just floated the elements to the left with same defined width to all of them. Then with JavaScript calculated total width of floated elements and then gave this value to the container. Now with defined width of the container I can float other element to the right. By this solution I am achieving the "one globalized parameter" for the width requirement.
