Dear all,
I am trying to make a relatively simple layout with two adjustment
columns filled with short news pieces, but there's a catch. I cannot
control the html for these news bits, so I am left with CSS only for
positioning etc. My problem is the following. The most natural way to do
what I want is to use "float: left" (or "float: right") for my news bits
and see them all filling the space. However, there's the catch: if the
news bits are allowed to be significantly different in size, then
sometimes "float: left" would leave unnecessarily large spaces on the
left (or, for "float: right", on the right), see the following simple
example:
<html>
<head>
<style type="text/css">
div { border: solid black 1px; }
#box1 { width: 49%; height: 100px; float: left; }
#box2 { width: 49%; height: 200px; float: left; }
#box3 { width: 49%; height: 300px; float: left; }
</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
</html>
What I really want is to fill in the space under box no. 1. Can I
somehow tell browser to use "float: left or right" (not literally, mind
you :) ), so that the space is filled completely? Are there any other
ways to perform this task that I am not aware of?
Best wishes,
Alex
