How to auto-expand the content when converting <table> to <div>

[coospaa]

I was trying to convert a <table> to <div> but I met a problem that the 3rd column (<div>) didn't expand to full height. Could you please help?

Here's the table:
<table cellpadding=0 cellspacing=0 width="800px">
<tr>
<td style="background:url(images/mid_left.png) repeat-y; width:10px;"></td>
<td style="background:url(images/mid_mid.png) repeat-y; width:770px">content<br />content<br />content<br /></td>
<td style="background:url(images/mid_right.png) repeat-y; width:20px;"></td>
</tr> </table>

Here't the <div> structure:
<div style="width:800px">
<div>
<div style="background:url(images/mid_left.png) repeat-y; width:10px; float:left"></div>
<div style="background:url(images/mid_mid.png) repeat-y; float:left; width:770px;height:100%">content<br />content<br />content<br /></div>
<div style="background: red url(images/mid_right.png) repeat-y; width:20px; float:left;"></div>
</div>
</div>

The last <div> with <mid_right.png> doesn't get expanded with the midddle <div>. I tried height:100% but it doesn't work. The content inside the middle <div> are dynamic (ie. I cannot predict the height) thus I cannot specify a fix height there.

Any comments are appreciated!

 

[Vragabond]

You will need to look into faux columns to achieve what you want. Unfortunately, there is no better way to do it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[coospaa]

Thanks Vragabond! I guess I have to go for the table design cos my content column (middle part) needs to have dynamic width (the width could be 770px in one page and 400px in another). I cannot create a vertical tiled backgroung image for every such page that uses this layout. And I want the width to be programmatically configurable. hmmm...

Thanks again for the reply!

 

[traingamer]

I cannot create a vertical tiled backgroung image for every such page that uses this layout.

Actually you can. You just need two graphics. There are multiple references to this - search on three faux columns or check out Dan Cederholm's Bulletproof Web Design.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[coospaa]

Thanks traingamer! I managed to get it work =)