I'm converting a bunch of tables into divs, the layout itself is very simple and so far it works great in both ie and ffx. BUT, when the content of a div doesn't fit then it grows out of it, and pushes everything after it down...in other works, makes a mess The layout is like this,
<div class="wrapper">
<div class="left">picture</div>
<div class="right">
<div class="title"> title</div>
<div class="content">body</div>
</div>
</div>
right floats right, title goes on top within right and content is under it,left floats left and spans the height of right (originally that was a rowspan=2). the problem comes with wrapper who needs to have a fixed height, because its parent doesn't have any (so i can't use %), and since the content is dynamic i don't know beforehand what height i need. If i get rid of height, the div expands, but the styling of the div (bg color,border etc) disappears because it now has height 0.
Also, i'm working on a pre-existing code which ideally i don't want to clutter too much with javascript hacks, but if i have no choice then i will. So, what can i do?
EDIT:
div.wrapper{ height: 150px ; width: 100% ; }
div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; }
div.right{ float: right ; height: 100% ; }
div.title{ width: 100% ; height: 50px ; }
div.content{ width: 100% ; height: 100px ; text-align: center ; }