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.

[benniaustin]

The problem is simple. Tables were not designed to be used for layout. Use a css layout instead, simple as this:



<div class="left">Left Column</div>
<div class="right">right Column</div>
<div class="center">Center Column</div>




.left {
float:left;
width:278px;
height:180px;
}
.right{
float:right;
width:487px;
height:180px;
}
.center {
background-image: url(flexBG.jpg);
background-repeat: repeat-x;
background-position: right;
}


If you must use tables. set the width of the table to 100%. Then define the width of the left and right cells, and do not define any width for the center.

What you're doing is setting the width of the center cell at 100%. you have to ask yourself, 100% of what? the entire page.


"valign=right"

valign stands for vertical alignment, and cannot be left or right.

[dude9er]

thanks for the help, works great.