JoeMecPak JoeMecPak - 4 months ago 10
HTML Question

Stack Div #2 and Div #3 beside Div #1

Can someone help me getting my divs to stack like on this image? It has to be done in CSS, since I can't split in 2 separate columns. My code should look like this :

<div class="container">
<div class="div1">
Div #1
</div>
<div class="div2">
Div #2
</div>
<div class="div3">
Div #3
</div>
</div>


enter image description here

Answer

The only way I can think of doing this is setting some static widths and heights. You can try the below.

I personally don't recommend this, I would suggest using a table or divs and making some columns/rows. It will keep the layout more fluid and dynamic. If you need to add more elements it will auto adjust for you.

If you avoid columns and rows, you have to calculate everything before you write it out

<div class='out'>
    <div class='in big'>one</div>
    <div class='in sm'>two</div>
    <div class='in sm'>three</div>
</div>

.in {
    float: left;
    background: tomato;
    border-right: 1px solid white;
    border-top: 1px solid white;
}
.out {
    width: 200px;
    height: 400px;
}
.big {
    width: 99px;
    height: 399px;
}
.sm {
    width: 99px;
    height: 199px;
}

and a fiddle: http://jsfiddle.net/u03rs3mb/3/

Comments