SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% Height on a nested DIV?

    Hi,
    I'm testing my new website design at http://www.gcwonline.us/v5/test.php

    I got the containing DIV to be 99% height of the browser window, but I can't get the two floated DIVs inside of it to be 100% height of the container. Does anyone know a way I can do this or is what I'm trying to do absolutely impossible?

    Any help is greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Read the faq on 100% height to understand why this won't work. Your layout isn't working in ie6 either because you missed out the * html .container {height:99%}

    The easiest method is to use the "faux column" background image method and repeat a background image on .container that carries the column colours and borders for your two columns. You simply set a top border on the left and right columns but for the bottom of the columns you have to drag an element upwards from beyond the container and into position to finish the bottom border of the columns.

    These examples show the image technique but you would need to drag the bottom borders upwards into position from the footer
    (or use a background image in the footer to matchup with the border above).

    http://www.pmob.co.uk/temp/spointfooter.htm
    http://www.pmob.co.uk/temp/spointfooter.htm

    Hope it helps

  3. #3

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll definatly give this a try later on this week!


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
  •