CSS 3 Div Floats with Liquid center div -


it's quite simple question can't figure out what's wrong.

i have 3 divs, 2 of set pixel sizes , other (the middle) fills remaining space between two.

|------|--------------------------|------| |      |                          |      | |      |                          |      | |      |                          |      | |------|--------------------------|------|        <-------------------------->                  width fill 

i have 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 here, right div doesn't float, goes underneath so:

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

clear:both makes element drop below floated elements precede in document.

so try using clear: both in #rightdiv.

for more information, check so answer.


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -