CODEWITHSUNDEEP
html
Urbycoz
Urbycoz

Reputation: 7421

How can I lay out three divs in two columns without using tables?

I need the following layout of divs:

+-----------+-----------+
|           |           |
|   Div A   |           |
|           |           |
|           |           |
+-----------+   Div C   |
|           |           |
|    Div B  |           |
|           |           |
|           |           |
+-----------+-----------+

I searched hard, but all I have found are lots of similar questions about placing divs in two columns (like this and this). None seem to deal with this exact problem.

I've tried using float:left and clear:both, but I just can't get anywhere.

Obviously it can be achieved using tables, but isn't it bad practice to use tables for layout. Can it be done without?

Upvotes: 1

Views: 1036

Answers (3)

Mick Jones
Mick Jones

Reputation: 517

This should work

<div style="width:100%">
<div id="topLeft" style="float:left; width:50%; height:200px">
</div>
<div id=topRight style="float:right; width:50%; height:400px">
</div>
<div id="bottomLeft" style="float:left; width:50%; width:200px">
</div>
</div>

Upvotes: 2

Skorpioh
Skorpioh

Reputation: 1355

<div>
    <div id="AB-Wrapper" style="float:left;width:50%;">
        <div id="DivA">some content</div>
        <div id="DivB">some more content</div>
    </div>
    <div id="DivC" style="float:right;width:50%;">even more content</div>
    <div style="clear:both;"><!-- clearer --></div>
</div>

http://jsfiddle.net/xREQK/

Upvotes: 1

Toddish
Toddish

Reputation: 516

If they don't have to be in that order, this should work:

HTML

<div id="container">    
    <div id="div3"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

CSS

#container {
    width:200px;
}

#div1, #div2 {
    width: 100px;
    height: 100px;
    float: left;
    clear: left;
}

#div3 {
    height: 200px;
    width: 100px;
    float: right;
}

#div1 {
    background-color: red;
}

#div2 {
    background-color: blue;
}

#div3 {
    background-color: green;
}

jsfiddle - http://jsfiddle.net/3UTcP/

Upvotes: 1

Related Questions