Tuesday, 15 June 2010

html - CSS - set height of two floated div matching first div's height -



html - CSS - set height of two floated div matching first div's height -

i have sample code:

<div id="container"> <div id="left"> [ contents...] </div> <div id="right"> <div id="inner"> [ templates... ] </div> </div> </div>

as can see have 2 divs want #right div height settled fixed #left height in #inner there's longer content can show vertical scrollbar...

how that? asking because know can set table-cell if #inner has longer content, first div increment height match #inner div's height.

css:

#container {min-height: 100px; background-color: beige;} #right {float: right; position: relative; max-width: 200px;} #inner {position: relative; height: 100px; overflow: auto;}

html:

<div id="container"> <div id="right"> <div id="inner">"lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div> </div> <div id="left"> [ contents...] </div> </div>

code available here: http://jsfiddle.net/c29t7/

html css

No comments:

Post a Comment