CODEWITHSUNDEEP
htmlcsslayoutcss-float
user1735120
user1735120

Reputation: 489

Stack right floats properly when left div is not enough to fill the left column

Ive been playing around with floats, and i cant seem to figure out how to do this kind of layout.

A   B
    C
    D

when div=A does not fill the whole left column, the last right div (div=D) moves below div=A. visual here http://jsfiddle.net/pedenski/rGhY3/

when content of A is not enough to fill the entire left column, the last right div acts crazy.

Upvotes: 2

Views: 82

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157284

You can do it like this...what I did is made a two separate containers, float 1st to the left, 2nd to the right, and simply place all the three containers in the second container

Demo

Or if you want the height to be 100% you can do it like this

CSS

#container {
    width: 400px;
    margin:auto;   
    background:#ccc;
      overflow: hidden;

}
#head {
    width: 100%;
    height:30px;
    background:purple;

}
#content {
    width: 190px;
    background:pink;
    float:left;
    margin: 0 0 0 5px;
}

#content2 {
float: right;
}
#side1 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;

}#side2 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;

}
#side3 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;
}

HTML

<div id="container">
   <div id="head">
    header
    </div>

        <div id="content">
            the quick brown fox
            the quick brown fox
            the quick brown fox
            the quick brown fox
            the quick brown fox
        </div>

       <div id="content2">
            <div id="side1">
            sidesidesideside
            sidesidesideside
            sidesidesideside
        </div>

    <div id="side2">
            sidesidesideside
            sidesidesideside
            sidesidesideside
        </div>

    <div id="side3">
            sidesidesideside
            sidesidesideside
            sidesidesideside
       </div>
    </div>
</div>

Upvotes: 1

Satya
Satya

Reputation: 4478

If div B, C, and D's heights are known, set div A's height to the sum. If their heights are not known, you can still set it dynamically wit javascript (without javascript, it'll look ugly but still be usable).

Upvotes: 0

Related Questions