SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox 100% div

    I'm having trouble making a certain div in Firefox span 100% of the page. I've tried several tutorials online, and as of now, the css code seems like it should do the trick. But Firefox unfortunately only extends the div as far as a the content fills up.
    The website I'm working on is www.umedplans.com/index2.php.
    My css is www.umedplans.com/css/test.css for Firefox and www.umedplans.com/css/iehacks.css for IE.
    Oddly enough, IE IS displaying the page properly, and the code is similar if not the same.
    If you go to the index2.php and notice that the light gray background doesn't span all the way to the bottom in FF, but it does in IE. It is similar on several other pages. The bg color comes from id="frameinside" but the span of it is only changed by id="center".

    Does anyone have any suggestions on how to make that light gray bg span the whole inside?

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

    In mozilla You cannot inherit height from a min-height div because it collapses to height:auto. If you could inherit it it would save an awful lot of problems but you just can't do it .

    Even if you could do it this code would be nonsense.

    Code:
    #frameinside { background-color: #e6e6e6; height: 100%; width: 553px; min-height: 100%; margin-right: auto; margin-left: auto; padding-top: 100px; padding-bottom: 10px; }
    It has a min-height of 100% and a height of 100%. That means it is just height:100% and the min-height means nothing because it is overwritten by a height of the same size. Then you have gone on to add a 100px top padding.

    So you want an element to be 100% high + 100px padding. Even if it worked that element would never fit in any container because 100% is as big as you can get Then the third problem is what happen when you get more content. Moxilla will fix the element to an initial 100% and content will just overflow. Are you starting to see the difficulty

    You can force mozilla to increase 100% height by using display:table but this won't work in ie7 so you have a consistent problem.

    The easiest solution is simply to add the light grey background colour to the middle of this image and the problem is solved without extra mark-up.

    http://www.umedplans.com/images/contentbgWeb.png

    You really only have one shot at 100% height and you have to be creative to complete the illusion. See the faq on 100% height for more info.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The easiest solution is simply to add the light grey background colour to the middle of this image and the problem is solved without extra mark-up.
    I'm an idiot. Thank you for your enlightenment. Sorry to waste forum time/space.


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
  •