Div not expanding proportional to content

Question

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?

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 ; }

Answer 1

Firstly, do not use <div class="title">, use <h1>.

That being said I'd say you could try playing around with the height property... but without CSS it's hard to tell what's going on.

Another trick is putting a background on the wrapper to fake that the left div is expanding all the way to the bottom. Left and Right float left and right with fixed width and it looks fine.

EDIT:

Ok, after seing the CSS, I'd say that what you want to do is to add a clear:both at the end of the wrapper as such:

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

Then, the "hack" that would work for this is to set the background that would normally be in Left in the wrapper. Like this it will look that Left is styled when really it's the wrapper that contains the styling.

By the way, don't go div.class, just use .class

Answer 2

I'm guessing you'd need to contain floats with

div.wrapper { overflow:hidden; }

But it would help if you actually pasted some css.

Edit: To replicate 100% height with columns an easy way as mentioned before is to rely on faux columns, set a background image on div.wrapper ( background:url(repeat.gif) repeat-y; ) and kill the 100% height on the columns because that won't have any effect.