I want to have block elements (divs, containing tables and forms) fit themselves around a floated element. I've distilled the problem into the code below, if you c&p this into a text file and view it you'll see what I mean. The 3 'Foo' blocks are all the same width, however, they are all influenced by the 'Bar' block in different ways. What I want is for the first two 'Foo' blocks to be narrower, so that they aren't drawn behind the 'Bar' block, while the 3rd 'Foo' block (which is completely below the 'Bar' block in my test browsers) takes the full page width.
I can't predict the length of the 'Bar' block so I can't set right margins. The actual code is 1000x more complex than this and the actual contents are dynamic.
CODE
<html>
<head>
<style type="text/css">
body { background: #eee; }
.box {
width: 200px;
border: 2px solid #00F;
float: right;
}
.form {
background: #FFF;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
<p>Bar!</p>
<p>Bar!</p>
<p>Bar!</p>
<p>Bar!</p>
</div>
<div class="module">
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body { background: #eee; }
.box {
width: 200px;
border: 2px solid #00F;
float: right;
}
.form {
background: #FFF;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
<p>Bar!</p>
<p>Bar!</p>
<p>Bar!</p>
<p>Bar!</p>
</div>
<div class="module">
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
<div class="form">
<p>Foo!</p>
<p>Foo!</p>
</div>
</div>
</body>
</html>
