I've been trying to solve this problem for some time. When I create a site using div's that are float I have the problem of leaving a blank space after the 1st div in the line break as in the example here:
I wanted to know how I do so I do not get the white space between the red div and the pink?
I specifically can not work with a grid system where the sum of all widths exceeds 100%, in case of your example the total div gives 200%.
In this case I would use nested div
div.column
{
width:50%;
float:left
}
#a{height:50px;background:red}
#b{height:20px;background:green}
#c{height:60px;background:blue}
#d{height:40px;background:pink}<div class="column">
<div id="a">
</div>
<div id="c">
</div>
</div>
<div class="column">
<div id="b">
</div>
<div id="d">
</div>
<div>The question is the size of the div.
Note that the blue div has 60px ; And the rose starts right after it with a smaller number. In other words the problem there is the size of them.
To solve this problem you would have to do this:
#c{height:60px;background:blue; float: right;}