CODEWITHSUNDEEP
htmlcssweb
Myforwik
Myforwik

Reputation: 3588

css get floating divs to stack vertically

Is it possible to get right float div's to always 'stack up' under each other?

For example I am trying to do something like this:

> ---------------------------------+
> |Container div           |   div1|
> |Fixed width             +--+----+ 
> |                           |div2|
> |                      +----+----+
> |                      |     div3|
> |                      +---------+
> |                                |
> +--------------------------------+

Div1, 2, and 3 are variable width and height. If I just float them all right, they won't always stack up like that, sometimes div2 will be put to the left of div1 etc. because the layout tries to minimise the height of the container. I would like them to always stack up under each other.

Upvotes: 4

Views: 20680

Answers (2)

Shiplu Mokaddim
Shiplu Mokaddim

Reputation: 57650

These css rules should put them on right aligned and stacked

.div1, .div2, .div3{
    float: right;
    clear: right;
}

See example fiddle.

Screenshot enter image description here

Source

.div1, .div2, .div3{
    float:right;
    clear:right;
}
.div2{
    background-color:green;
    width: 300px;
    height: 20px;
}
.div1{
    background-color:blue;
    width: 100px;
    height: 30px;
}
.div3{
    background-color:red;
    width: 80px;
    height: 40px;
}

.container{
    background-color: gray;
    width: 400px;
    height: 400px;
}

Upvotes: 23

Horen
Horen

Reputation: 11382

Put a DIV wrapper around your div1, div2, div3 and let the wrapper float while setting div1, div2, div3 to display: block and float: none

Upvotes: 0

Related Questions