I have what seems like a simple problem, but I still have to find a solution. I have a series of divs that can vary in height, considering that they tend to have the same width. I would like the liquid layout to basically end up creating a variable number of columns when the page is resized. Ideal for float left. The problem is that when divs have different heights, as a result, there is a lot of white space between them.
Clearly, a simple solution is to write javascript to do all this for me. But I would not want to resort to this if there is a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Simple Float Example</title> <style type="text/css"> .dv { border: solid 1px red; float: left; width: 300px; } </style> </head> <body> <div> <div style="height: 40px;" class="dv"></div> <div style="height: 20px;" class="dv"></div> <div style="height: 60px;" class="dv"></div> <div style="height: 20px;" class="dv"></div> </div> </body> </html>
You will see that when the page is very narrow, everything looks as you expected. All divs add up. If you expand the page to full size, but again - everything looks great. But when there are 2 or 3 columns, see how much extra space there is. I would post the image, but my reputation still does not allow me to do this.
In any case, I experimented with various display and position settings, and I could not get him to really do what I want.
Any suggestions? Thanks!
-rp
source share