SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    New York
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ff height problem?

    Hi,

    I've encountered a height/expansion inconsistency between ie and ff, where ie allows the outer div to expand in tandem with the inner div (desired), but ff expands the inner div beyond the outer div (undesired).

    #outer_div{
    position:relative;
    top:40px;
    width:675px;
    height:100%;
    background-color:#fff;
    }
    #inner_div{
    position:relative;
    width:533px;
    margin-left:100px;
    margin-right:20px;
    padding-left:20px;
    padding-top:50px;
    padding-bottom:50px;
    text-align:left;
    background-color:#fff;
    border-left:1px solid #2A3785;
    border-bottom:1px solid #2A3785;
    }

    <div id='outer_div'>
    <div id='inner_div'></div>
    </div>

    Thanks,

    Michael

  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,

    When you tell firefox that you want an element to have a specific height then it does what you say If you say you want 100% then thats all you will evre get (assuming it can ascertain what the 100% is inherrited from).

    However Ie on the other hand is stupid. You say you want a 100% but what you actually get is a minimum of 100%. If content is greater then ie will automatically increase the elements height.

    Therefore if you want firefox to also have a min-height of 100% then you have to explicitly tell it so.
    Code:
     
    #element{
    min-height:500px;/* for good browsers*/
    }
    * html #element {height:500px}/* for ie*/
    If you read my FAQ on 100% height you will see this explained in more detail.

    Hope that helps.

    Paul

    Btw if you specify 100% and then start the element 40px from the top then the element will extend 100% + 40px. (see FAQ)

  3. #3
    SitePoint Member
    Join Date
    Apr 2004
    Location
    New York
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanks, Paul. Guess my brain is IE specific! I'll be sure to take a look at your FAQ as part of my re-education.

    Happy New Year to ya!!!


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
  •