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

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -