Position div under floated div - html

Question

A simple problem today but can't seem to find the solution. I have four divs - I would like #down to be placed directly below #up, but for the life of my can't figure it out. Here is my CSS and HTML.
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
Elements must remain floated left.

Answer 1

maybe try with an additional div to get both up and down together?
<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>
And you will changed your css to :
up_down{
width: 33.3%;
height: 200px;
}
#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}

Answer 2

Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically.

Answer 3

As #isherwoord says in the first comment, wrap div#up and div#down together in another div, forexample div#column
(I hope you don't mind the HAML way of writing HTML.)
div#column
div#up
div#down
div#middle
div#right

Answer 4

If you know the heights/widths you can just set the top position of #down with position:relative;top:-100px; to pull it back up.
Example:
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
position:relative;
top:-100px;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>