How can I get a child div to float right and 'above' divs prior to it? - css

Question

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:
<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>
And here is the CSS:
#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;
}

Answer 1

Simply wrap the two sides in a div with common CSS.
HTML:
<div id="container">
<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>
<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div>
</div>
</div>
-
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.l { width: 218px; float: left; }
.imgbox {
width: 218px;
height: 100px;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
background-color: red;
}
.pick#second {
background-color: blue;
}
.pick#third {
background-color: purple;
}
Demo here

Answer 2

Put all your DIV's on the left side into a container div and float it to the left. Then put all your right side DIV's into a container and float it to the right.
You might have to specify the width of .left_side and .right_side too.
HTML:
<div id="container">
<div class="left_side">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="right_side">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.left_side {
float:left;
}
.right_side {
float:right;
}
.imgbox {
width: 218px;
height: 100px;
float: left;
clear: left;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
float: left;
clear: both;
background-color: red;
}
.pick#second {
float: left;
background-color: blue;
}
.pick#third {
float: right;
clear: right;
background-color: purple;
}

Answer 3

First, you need to wrap the divs you want on the left into one container, and the divs on the right in another:
<div id="container">
<div id="left">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div id="right">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
Then, you can remove the individual float assignments from each div and assign them instead to #right and #left:
#left {
float: left;
}
#right {
float: right;
}
Finally, you need to take the correct widths into account. Your #container has 440px of room. Each child div is assigned 218px; however, each of those divs also has a 1px border on each side, making them take up 218 + 2(1) = 220px of room. Reduce the width of #imgbox and .pick to 216px.
Everything together can be seen at this jsFiddle.

Answer 4

Create two sub-containers and float them.
<div id="container">
<div class="sub-container">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="sub-container">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
.sub-container{
margin: 0;
padding:0;
display: inline-block;
float: left;
}