CSS help needed

[nIckEl101]

my CSS fu is somewhat lacking and i do all the back dev. I'm looking for some help with css that i'm sure is possible.

I want to achieve this effect, specifically the 2 boxes stacked on top, any help is most appreciated, or a link to a resource that i can find out how to do it.

thanks!

 

[djkav]

Make 4 divs and float them left or right. Inside the 3rd div, make another 2 divs that are not floated. That means that they will stack below instead.

 

[Redgie]

Do as above, but make sure you only apply borders to the first 2 Div's and the last div, and the 2 inside the 3rd box. If you apply a border to the 3rd overall div it will join the 2 boxes together.

 

[nIckEl101]

Is there any way to do this with out a containing div. These blocks are being generated dynamically, but can substitute classes or ids.

Essentially looking for mark up like the


Div class=normal
Div class=normal
Div class=stacked
Div class=stacked
Div class=normal

 

[FabienO]

<style type="text/css" media="screen">

.box {
float: left;
margin-right: 5px; /* Adjust how you wish */
height: 100px; /*remove when not needed*/
width: 100px; /*remove when not needed*/
background-color: red; /*remove when not needed*/
margin-right: 10px; /*remove when not needed*/
}

#boxtop {
height: 50px; /*remove when not needed*/
background-color: blue; /*remove when not needed*/
}

#boxbottom {
height: 50px; /*remove when not needed*/
background-color: yellow; /*remove when not needed*/
}
</style>


<div>
<div class="box"></div>
<div class="box"></div>
<div class="box">
<div id="boxtop"></div>
<div id="boxbottom"></div>
</div>
<div class="box"></div>
</div>

Obviously things to take in to consideration, the overall width of the container div (farthest out one). I put in height and colour attributes so you could visually see what's happening.

 

[Tripnologist]

No real easy way without the container.

 

[BunnyKillBot]

are the dimensions known? You could reign in the position using left: -Xpx; top:Ypx; ?