I've created a parent div with four divs inside of it. The first div (grey)contains an image, the second (red) is to be below this div with a description. The two other divs are to float right of these two. This is the closest I can get:
I want the 3rd/4th divs to sit flush up top. I could use a negative top-margin but I would like for it to naturally go up. Also, I cannot rearrange the order of the divs. It is a basic problem/misunderstanding but I can't give a clear enough definition for google.Here is my html:\[code\]<div id="container"><div class="imgbox"></div><div class="pick" id="first"></div><div class="pick" id="second"></div><div class="pick" id="third"></div></div>\[/code\]And here is the CSS:\[code\]#container { width: 440px; height: 212px; border: 1px solid grey; } div { border: 1px solid black; display: block; } .imgbox { width: 218px; height: 100px; float: left; clear: none; background-color: grey; } .pick { width: 218px; height: 100px; } .pick#first { float: left; clear: left; background-color: red; } .pick#second { float: left; background-color: blue; } .pick#third { float: right; clear: right; background-color: purple; }\[/code\]