Behold, my div structure!
ONE // at the top level
TWO THREE // two divs side by side in the middle level
FOUR // residing at the bottom
<div id="ONE">
<div></div>
<div><img src="logo.png"></div>
</div>
<div id "FIVE">
<div id="TWO">
<div></div>
<div></div>
</div>
<div id="THREE">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="FOUR">
<div></div>
</div>
The burning question: How can I make TWO align with the bottom level of THREE without disrupting the rest of the layout?
I attempted to apply position :relative; to "FIVE" and position: absolute to "TWO" and "THREE". However, this caused "FIVE" to overlap with "ONE".
EDIT: Check out the Fiddle!
#ONE{
width: 100px;
height: 50px;
background-color: #ff0000;
}
#FIVE{
width: 100px;
height: 50px;
background-color: #cdb79e;
position:relative;
}
#TWO {
display: inline-block;
background-color: #9e0b0f;
position:relative;
width: 50px;
height: 10px;
float: left;
}
#THREE{
display: inline-block;
background-color: #088da5;
position:relative;
width: 50px;
height: 50px;
}