CODEWITHSUNDEEP
htmlcss
Warren Longmire
Warren Longmire

Reputation: 11

Pure CSS solution to stacking columns of divs

I want to float a sidebar div to the right beside two stacked divs, both floated to the right.

You can find the code here: http://jsfiddle.net/okcomputer82/ED4WJ/2/

I'm sure I can do this by grouping the left divs, but I would like to know if there is a cleaner way.

Thanks.

Upvotes: 0

Views: 1389

Answers (2)

Senad Meškin
Senad Meškin

Reputation: 13756

remove "clear: both;" from css class .left, and it will be ok.

NEW update class .left to "clear:left;" 

.left {
    float: left;
    clear: left;
    background: yellow;
}

and put your right div to be at the first place like below

<div class="content">
        <div class="right"></div>
    <div class="left"></div>
    <div class="left"></div>

</div>

example : http://jsfiddle.net/ED4WJ/5/

Upvotes: 2

anna
anna

Reputation: 1011

<div class="content">
    <div class="left"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css

.content

{   
    Float:left;
    width:960px;
    height:100px;

}

.left
{
float:left;
width:40%;
height:100%;
background-color:red
}

.right
{
  float:left;
   width:20%;
  height:100%;
  background-color:yellow

}

Upvotes: 0

Related Questions