Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Three Columns - Middle Flexible in IE

    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:

    Code:
    <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:

    Code:
    .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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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:
    Code:
    <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.
    Code:
    .flex {
    	background-image: url(flexBG.jpg);
    	background-repeat: repeat-x;
    	background-position: right;
    }

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Why are you doing this with tables when you can easily do it with CSS? Here’s an example that I hand‐coded within a few minutes a few days ago.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Aug 2004
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •