Question

I have three div layers inside of another larger one. Something like this:

Image http://dev.kgstiles.com/wp-content/uploads/2012/10/Stack.png

Lets say the blue sections are the header and footer. What I currently have is the the green next to the top yellow div, but the bottom of the green div pushes the second yellow div down. I essentially have two divs next to each other then one div below both of them, but I want something more closely resembling the picture. What might I be missing that could put the green div next to both of the yellow ones?

I would post code exactly because there is a lot in each div, but I have something like:

<div class="container" >

<div id="greenDiv" style="float:right; padding-right:5%; padding-top:15px;">

</div>
<div id="topYellow" style="dsiplay:block;"> 

<-- Content -->
</div>
<div id="bottomYellow" style="dsiplay:block; float:left;"> 

<-- Content -->

</div>

What exactly do I need to do to keep the green div from pushing the bottom yellow one down? Any help would be greatly appreciated!

Answer 1

I would avoid using floats at all. If the green div has a fixed width, you could style them like this:

.container {
    position: relative; /* or anything besides static */
}

#greenDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; 
}

#topYellow, #bottomYellow {
    margin-right: 100px; /* Plus more if you want a gap */
}

Essentially, this takes the green div out of the “flow” of the container. The yellow divs will simply be placed with a normal flow, and their margin prevents them from overlapping the green div. You could alternatively just float #greenDiv and not #bottomYellow instead of using absolute positioning. The benefit to this is that in case #greenDiv is taller than the two yellow, then doing a clear: both on the footer should ensure that #greenDiv and the footer don’t overlap.