CSS how to have two divs to the right of one div but not beside each other

Question

I have three divs background-color Red, Yellow and Blue. I am wanting to get the Red div on the left. I want the Yellow div beside the Red. I want the Blue div beside the Red but underneath the Yellow div. I came up with

<html>
     <body>
          <div style="background-color:Red; height:50%; float: left">Red</div>
          <div style="background-color:Yellow; float: left; clear:right">Yellow</div>
          <div style="background-color:Blue; float:left">Blue</div>
     </body>
</html>

This doesn't work however as the Blue div is not underneath the Yellow div but beside it.

mu is too short mu is too short · Accepted Answer · 2011-05-04T02:46:20

The easiest way is to wrap them in <div>s to get columns:

<div class="wrapper">
    <div class="red">
        Red
    </div>
</div>
<div class="wrapper">
    <div class="yellow">
        Yellow
    </div>
    <div class="blue">
        Blue
    </div>
</div>

And some CSS:

.wrapper {
    float: left;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}

And a live example: http://jsfiddle.net/ambiguous/aNVam/

If you have specific sizes on your <div>s (or at least on the red one), you can do it without the wrappers using a clear: left and margin-left on the blue one:

<div class="red">
    Red
</div>
<div class="yellow">
    Yellow
</div>
<div class="blue">
    Blue
</div>

And the CSS for this one:

.red {
    background-color: red;
    width: 100px;
    float: left;
}
.yellow {
    background-color: yellow;
    float: left;
    width: 75px;
}
.blue {
    background-color: blue;
    float: left;
    clear: left;
    width: 75px;
    margin-left: 100px; /* see .red */
}

And a live example of this version: http://jsfiddle.net/ambiguous/t8mMt/1/

At least I think that's the layout you're after.

CSS how to have two divs to the right of one div but not beside each other

3 Answers