Three Columns - Middle Flexible in IE

[dude9er]

I have three columns. I want to make the middle column flexible/stretchable using CSS based on content of a row. IE is rendering this stupid, FF is fine of course.

Here is a bit of code to view the content of each cell:


<td width="278" height="180" name="1"><img src="t2hdrimgL.jpg" width="278" height="180" name="2"></td>
<!--this is the cell I want flexible-->
<td width="1%" class="flex">&nbsp;</td>
<td align="right" name="3"><img src="t2logo.jpg" width="487" height="180"></td>

Here is the CSS for this cell:



.flex {
background-image: url(flexBG.jpg);
background-repeat: repeat-x;
background-position: right;
width: 100%;
}


When this CSS is inserted, the width stretches as long as the flexBG.jpg image resulting in major bottom scroll in IE.

What I want:

Cell "name 1" to be width="278px" image "align=default"
Cell "name 2" to be flexible with a background image "valign=right"
Cell "name 3" to be width="487" image "valign=right"

Can anyone please help make this middle column flexible and adjust itself using CSS?

Thanks in advance.

[Wickham]

The left cell is 278px wide, the right 487px totalling 765px. In a screen 800px wide less the scrollbar you have practically nothing left for the middle cell. How wide is the background image you want to put in it?

In my screen resolution 1024px wide there was a flexible middle cell in IE7 but if the background image you want to put in it is wider than the space available only part of it will show as background images do not expand the cell like an inserted image will.

I made images 278 x 180 and 487 x 180 for the outside cells and I put an 351px background image in the middle cell so only part showed but the cell was flexible in that the cell width reduced when reducing the window size. It was the same in Firefox. If the middle cell has a background image as your css style shows, the cell should be flexible in width. If the middle cell has a large inserted image a horizontal scrollbar will be created.

My IE6 PC is only 800*600 but I could still check that the middle cell was flexible by reducing the width of one of the side cells.

You said When this CSS is inserted, the width stretches as long as the flexBG.jpg image resulting in major bottom scroll in IE. but that didn't happen to me. Can you put your version up online for someone to see what is wrong?

Alternatively stop using tables and use floated divs as item 11 on http://www.wickham43.supanet.com/tutorial/threecolumns.html