I’m having a problem with floated divs. When searching for an answer most questions were how to achieve the effect I am getting instead of how to achieve what I want. Basically I’m floating divs to create 3 columns and the desired outcome is the fourth div, which should be in column 1 directly below the first div, begins where the third floated div ends in height instead of where the one directly above it, the first div, ends. The code below in the latest chrome demonstrates what I don’t want.
The effect I’m getting is like I expect clear: left; to behave if applied to the fourth floated div.
The code below works only on a resolution where 3 * 400px is less than the screen width but 4 * 400 is greater than screen width.
This image shows what’s happening, I want the fourth div where I’ve shown with an arrow instead of where it is: http://img687.imageshack.us/img687/2613/desired.png
<html>
<head>
<style>
.div1
{
float: left;
background-color: black;
height: 100px;
width: 400px;
}
.div2
{
background-color: red;
height: 200px;
width: 400px;
float: left;
}
.div3
{
float: left;
background-color: blue;
height: 500px;
width: 400px;
}
.div4
{
background-color: green;
float: left;
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
From the W3:
You may be interested in the jQuery masonry plugin.