1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

expand <div> height to fill <td> / vertically align <div> to bottom

Discussion in 'CSS' started by infekt, Jan 29, 2006.

  1. #1
    After an upgrade to Firefox 1.5 one of my page layouts broke. I would think this would be a simple solution but I have now spent far too much time on this.
    SEMrush
    Here is an example:
    [​IMG]

    Example #1:
    My intent is to get div#wrapper to extend its height to completely fill the <td> that it is contained in. Then, have #top-box vertically aligned to the top and #bottom-box vertically aligned to the bottom of #wrapper.

    Example #2:
    Instead of trying to stretch a <div> height to fill the <td>, I have removed the div#wrapper, and instead applying the styling to the <td>. Here all I'm trying to do, is vertically align #top-box to the top, and #bottom-box to the bottom.

    The end result I am looking for would have the space between these two boxes expand based on the content in the right hand <td>. I am not having any luck. I had this working before the release of Firefox 1.5, but now something has changed.
    PLEASE HELP!

    thanks,
    infekt
     
    infekt, Jan 29, 2006 IP
    SEMrush
  2. AWD1

    AWD1 Peon

    Messages:
    191
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this.

    For your bottom div:
    
    <div style="position:  absolute;  bottom:  0;"> (replace 0 with the number of pixels from the bottom you want it.
    
    Code (markup):
    Never tried it before, but it should work.
     
    AWD1, Feb 1, 2006 IP
  3. yangyang

    yangyang Banned

    Messages:
    757
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #3
    How about this:

    td {position:relative;}
    #wrapper {position:absolute;top:0;left:0;width:100%;height:100%}
    HTML:
    The same problem is kind of universal as you have a content column which is constantly being pushed longer as the content inside grows and the sidebar column is not adjusting itself as the one containing content does. You want them to be the same in height. Right?

    One of the reasons for this might be that you need a stretching background for the sidebar which is the #wrapper in your case. You might need the background to be at the bottom of the #wrapper. If it is in this case, just set the background on table, that is, the container of the sidebar and content and position it left bottom.
     
    yangyang, Jan 1, 2009 IP