Advanced Search

Results 1 to 6 of 6

Thread: fill empty space with <div>, <td>, anything?

  1. #1
    Join Date
    May 2010
    Posts
    39
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Default fill empty space with <div>, <td>, anything?

    Not sure anymore if there's a way to do it. Need help??

    Need to fill empty space from bottom up!

    <div height 100%>

    <div header height 100px></div>

    <table>
    <tr>
    <td id="area 1">



    <div>content of this area sometimes a bit longer than one of area 2</div>

    <div? table? td?> is it possible to have something here that will fill empty area from bottom up</something>

    </td>
    <td id="area 2">



    <div>content of this area is often longer than one of area 1</div>

    <div? table? td?> is it possible to have something here that will fill empty area from bottom up</something>

    </td>
    </tr>
    </table>

    </div>

    <div footer margin-top:-20px;></div>



    <td>s obviously have equal heights in this case and one will stretch to match the other, but i need to alter their backgounds with different colors. So i need to place some element under those <div>s inside content area that will take up left space, without creating scroll bar.

    I got "sort of slution" but it involves creating content of area 1 outside the <table> and then dragging <table> up using z-index to place under that content, as content of area 2 is often longer, that gives some fix with pixel adjustment where needed.

    100% height doesn't seem to work much in this case, maybe to do with parent/child elements, don't know...

    Is there a universal cross browser solution for this (ie6 not needed, but ie7 is a must)?

    P.S. Can use different elements, doesn't have to be <table>s or <div>s, can use separate stylesheets, no problem. Idea is: two collumns and what was described above. Thanks to everyone!

  2. #2
    Join Date
    May 2010
    Posts
    39
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Default

    If anyone looking here...

    I should mention that it is transparency/none-transparency that i need to acheive. IE will work with position:relative but others will apply parent element property, so no choice. But if I could stretch something from bottom up, i can achieve transparency, yet keep text above none-transparent. And keep both collumns verticaly liquid.

  3. #3
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Sounds like you might need to use the faux column technique. take a look at this article:
    http://www.alistapart.com/articles/fauxcolumns/

  4. #4
    Join Date
    May 2010
    Posts
    39
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Default

    Thanks zip222, but that won't do. I have none transparent element on top of transparent, or so the illusion of it with <div> floats and/or <td>. Yet to feel space under it in order to create vertically liquid columns seems to be imposible as there's no element and/or property that will stretch bottom up to fill space, at least I haven't found one yet. <TD> support for 100% height is not browser universal and the rest don't even come close.

    It seems unless you use z-index and px size in one column to match another, nothing else will do...

    I keep looking... if anyone know how to, please suggest.

  5. #5
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    You need to set a min-height in your CSS. usually a min-height:100% will work as long as the container div has some content.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  6. #6
    Join Date
    May 2010
    Posts
    39
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Default

    Thanks! Tried, failed on browser support. They also tend to extend the height to page's height which is 100% + content height, creating scroll and lots of empty space, i'm using steaky footer in there, that's why page and <div> are 100%. I think that I just have a very tall order here. Though shame there's no simple way around it. The more I learn htmls/css and browser support the more frastrated I get . By now i hate MS, and the rest as well, for not adopting one standard and simple way of coding pages!

Bookmarks

Posting Permissions

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