html - Div height and background-color -
i have tried overflow
, using clear: both;
can't child div heights equal, don't want heights static. can me achieve this?
here fiddle showing problem.
since seem have static widths, don't want static heights, fix setting container div
position: relative;
, having 1 div
float left, , positioning other div
's absolutely. in jsfiddle.
the 1 floating div
ensure container div
has height, , absolutely positioned div
's automatically resize same height floating div
. have set overflow-y: auto
on absolutely positioned div
's ensure scroll bars appear inside of them if height exceeds height of floating div
. should work in browsers.
div.container { position: relative; width: 800px; // height determined content of div.left } div.left { float: left; width: 400px; // height determined content } div.middle, div.right { position: absolute; overflow-y: auto; width: 200px; bottom: 0px; // these 2 lines ensure div's height top: 0px; // equal height of div.left , div.container left: 400px; // value should equal width of div.left } div.right { left: 600px; // value sum of width of div.left , div.middle. }
p.s. if want background-color
fill whole container div
(as post title suggests), set background-color
on container div
.
Comments
Post a Comment