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
Post a Comment