View Full Version : Three Columns - Middle Flexible in IE

12-27-2006, 09:07 PM
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.

12-27-2006, 09:47 PM
Hello dude9er,
Not really enough code to see your problem, or to fix it.
Have a look at http://www.nopeople.com/CSS/3-column/ The column widths can be edited to the sizes you want.

12-27-2006, 09:47 PM
Well, first, you made one cell 100% of the table, which is why its making it scroll. Also, valign needs to be "top", "middle", or "bottom". And you named the image "2", not the cell "2". Here is what I think you mean:

<td width="278" height="180" name="1"><img src="t2hdrimgL.jpg" width="278" height="180"></td>
<td class="flex" name="2">&nbsp;</td>
<td align="right" name="3" width="487"><img src="t2logo.jpg" width="487" height="180"></td>

I don't know where those cells are on your table, so here is the stuff you need to set for the table:

<table width="100%">
Since the other 2 tds are specified, the middle one should grow to fit the table.

And you need to take out the width: 100% for the flex td, because it is trying to make your td the entire size of the table.

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

12-27-2006, 11:10 PM
Why are you doing this with tables when you can easily do it with CSS? Here’s an example (http://jsg.byethost4.com/demos/DIC%2022227%20Demo.html) that I hand‐coded within a few minutes a few days ago.

12-29-2006, 05:21 AM
thanks for all the help. I ended using tables only because the layout was allready built in tables. 100% width in CSS was screwing everything up.