CSS 3 Div Floats with Liquid center div

Question

It's quite a simple question but I can't figure out what's wrong.

I have three divs, 2 of set pixel sizes and the other (the middle) fills the remaining space between the two.

|------|--------------------------|------|
|      |                          |      |
|      |                          |      |
|      |                          |      |
|------|--------------------------|------|
       <-------------------------->
                 Width Fill

I have the following CSS:

Left Div

#leftdiv {
    height: 50px
    width: 50px;
    float: left;
    }

Middle Div

#middlediv {
    min-width: 270px;
    width: calc(100% - 100px);
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -o-calc(100% - 100px);
    float: left;
}

Right Div

#rightdiv {
    width: 100px;
    height: 50px;
    float: right;
}

I've simplified it here, but basically the right div doesn't actually float, it goes underneath like so:

|------|--------------------------|
|      |                          |
|      |                          |     
|      |                          |      
|------|--------------------------|
                                |------|
                                |      |
                                |      |
                                |      |
                                |------|

This normally happens if the width on the parent div (the one containing the right columns) is not wide enough — Pattle, Jul 11 '13 at 10:16
Try putting the right `div` first in the HTML. If you would like a more detailed answer, please make a [demo](http://jsfiddle.net/). — thirtydot, Jul 11 '13 at 10:16

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

clear:both makes the element drop below any floated elements that precede it in the document.

so try using clear: both in #rightdiv.

For more information, check this SO Answer.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 11 '13 at 10:17

Praveen

53,079
32
129
156

score 0 · Answer 2 · answered Jul 11 '13 at 10:17

#middlediv {
    min-width: 270px;
    width: calc(100% - 150px);
    width: -moz-calc(100% - 150px);
    width: -webkit-calc(100% - 150px);
    width: -o-calc(100% - 150px);
    float: left;
}

The sum of the widths of your div is exceeding the width of the screen, so the right div is pushed down

score 0 · Answer 3 · answered Jul 11 '13 at 10:18

Your #rightDiv has a width of 100px when it needs to have a width of 50px

#rightdiv {
    width: 50px;
    height: 50px;
    float: right;
}

Otherwise the combined width of the left and right divs is 150px and you are only subtracting 100px

width: calc(100% - 100px); //100px is too small

CSS 3 Div Floats with Liquid center div

3 Answers3