Div 100 height works on Firefox but not in IE

Question

I have a container div that holds two internal divs  both should take 100  width and 100  height within the container   I set both internal divs to 100  height  That works fine in Firefox  however in IE the divs do not stretch to 100  height but only the height of the text inside them   The following is a simplified version of my style sheet    container      height  auto     width  100       container  mainContentsWrapper      float  left      height  100      width  70      margin  0     padding  0       container  sidebarWrapper            float  right      height  100      width  29 7      margin  0     padding  0      Is there something I am doing wrong  Or any Firefox IE quirks I am missing out

User · Answer

Its hard to give you a good answer  without seeing the html that you are actually using   Are you outputting a doctype   using standards mode rendering   Without actually being able to look into a html repro  that would be my first guess for a html interpretation difference between firefox and internet explorer

User · Answer

I think  works fine in Firefox  is in the Quirks mode rendering only  In the Standard mode rendering  that might not work fine in Firefox too   percentage depends on  containing block   instead of viewport   CSS Specification says     The percentage is calculated with   respect to the height of the generated   box s containing block  If the height   of the containing block is not   specified explicitly  i e   it depends   on content height   and this element   is not absolutely positioned  the   value computes to  auto     so   container   height  auto     container  mainContentsWrapper   height  n      container  sidebarWrapper   height  n       means   container   height  auto     container  mainContentsWrapper   height  auto     container  sidebarWrapper   height  auto      To stretch to 100  height of viewport  you need to specify the height of the containing block  in this case  it s  container   Moreover  you also need to specify the height to body and html  because initial Containing Block is  UA-dependent    All you need is     html  body   height 100      container   height 100

User · Answer

Try this      container      height  auto     min-height 100      width  100       container  mainContentsWrapper      float  left      height  auto     min-height 100     width  70      margin  0     padding  0       container  sidebarWrapper            float  right      height  auto     min-height 100     width  29 7      margin  0     padding  0

User · Answer

I ve done something very similar to what  tvanfosson  said  that is  actually using JavaScript to constantly monitor the available height in the window via events like onresize  and use that information to change the container size accordingly  as pixels rather than percentage     Keep in mind  this does mean a JavaScript dependency  and it isn t as smooth as a CSS solution  You d also need to ensure that the JavaScript function is capable of correctly returning the window dimensions across all major browsers   Let us know if one of the previously mentioned CSS solutions work  as it sounds like a better way to fix the problem

User · Answer

You might have to put one or both of   html   height 100       or  body   height 100       EDIT  Whoops  didn t notice they were floated  You just need to float the container

User · Answer

Its hard to give you a good answer  without seeing the html that you are actually using   Are you outputting a doctype   using standards mode rendering   Without actually being able to look into a html repro  that would be my first guess for a html interpretation difference between firefox and internet explorer

User · Answer

I don t think IE supports the use of auto for setting height   width  so you could try giving this a numeric value  like Jarett suggests    Also  it doesn t look like you are clearing your floats properly  Try adding this to your CSS for  container    container       height 100       width 100       overflow hidden         for IE        zoom 1

User · Answer

I don t think IE supports the use of auto for setting height   width  so you could try giving this a numeric value  like Jarett suggests    Also  it doesn t look like you are clearing your floats properly  Try adding this to your CSS for  container    container       height 100       width 100       overflow hidden         for IE        zoom 1

User · Answer

You might have to put one or both of   html   height 100       or  body   height 100       EDIT  Whoops  didn t notice they were floated  You just need to float the container

User · Answer

I ve been successful in getting this to work when I set the margins of the container to 0    container      margin  0 px      in addition to all your other styles

User · Answer

I m not sure what problem you are solving  but when I have two side by side containers that need to be the same height  I run a little javascript on page load that finds the maximum height of the two and explicitly sets the other to the same height   It seems to me that height  100  might just mean  make it the size needed to fully contain the content  when what you really want is  make both the size of the largest content    Note  you ll need to resize them again if anything happens on the page to change their height -- like a validation summary being made visible or a collapsible menu opening

User · Answer

I ve been successful in getting this to work when I set the margins of the container to 0    container      margin  0 px      in addition to all your other styles

User · Answer

I m not sure what problem you are solving  but when I have two side by side containers that need to be the same height  I run a little javascript on page load that finds the maximum height of the two and explicitly sets the other to the same height   It seems to me that height  100  might just mean  make it the size needed to fully contain the content  when what you really want is  make both the size of the largest content    Note  you ll need to resize them again if anything happens on the page to change their height -- like a validation summary being made visible or a collapsible menu opening

User · Answer

I ve done something very similar to what  tvanfosson  said  that is  actually using JavaScript to constantly monitor the available height in the window via events like onresize  and use that information to change the container size accordingly  as pixels rather than percentage     Keep in mind  this does mean a JavaScript dependency  and it isn t as smooth as a CSS solution  You d also need to ensure that the JavaScript function is capable of correctly returning the window dimensions across all major browsers   Let us know if one of the previously mentioned CSS solutions work  as it sounds like a better way to fix the problem

User · Answer

Its hard to give you a good answer  without seeing the html that you are actually using   Are you outputting a doctype   using standards mode rendering   Without actually being able to look into a html repro  that would be my first guess for a html interpretation difference between firefox and internet explorer

User · Answer

I m not sure what problem you are solving  but when I have two side by side containers that need to be the same height  I run a little javascript on page load that finds the maximum height of the two and explicitly sets the other to the same height   It seems to me that height  100  might just mean  make it the size needed to fully contain the content  when what you really want is  make both the size of the largest content    Note  you ll need to resize them again if anything happens on the page to change their height -- like a validation summary being made visible or a collapsible menu opening

User · Answer

I ve been successful in getting this to work when I set the margins of the container to 0    container      margin  0 px      in addition to all your other styles

User · Answer

You might have to put one or both of   html   height 100       or  body   height 100       EDIT  Whoops  didn t notice they were floated  You just need to float the container

User · Answer

I ve done something very similar to what  tvanfosson  said  that is  actually using JavaScript to constantly monitor the available height in the window via events like onresize  and use that information to change the container size accordingly  as pixels rather than percentage     Keep in mind  this does mean a JavaScript dependency  and it isn t as smooth as a CSS solution  You d also need to ensure that the JavaScript function is capable of correctly returning the window dimensions across all major browsers   Let us know if one of the previously mentioned CSS solutions work  as it sounds like a better way to fix the problem

User · Answer

Try this      container      height  auto     min-height 100      width  100       container  mainContentsWrapper      float  left      height  auto     min-height 100     width  70      margin  0     padding  0       container  sidebarWrapper            float  right      height  auto     min-height 100     width  29 7      margin  0     padding  0

User · Answer

I think  works fine in Firefox  is in the Quirks mode rendering only  In the Standard mode rendering  that might not work fine in Firefox too   percentage depends on  containing block   instead of viewport   CSS Specification says     The percentage is calculated with   respect to the height of the generated   box s containing block  If the height   of the containing block is not   specified explicitly  i e   it depends   on content height   and this element   is not absolutely positioned  the   value computes to  auto     so   container   height  auto     container  mainContentsWrapper   height  n      container  sidebarWrapper   height  n       means   container   height  auto     container  mainContentsWrapper   height  auto     container  sidebarWrapper   height  auto      To stretch to 100  height of viewport  you need to specify the height of the containing block  in this case  it s  container   Moreover  you also need to specify the height to body and html  because initial Containing Block is  UA-dependent    All you need is     html  body   height 100      container   height 100

User · Answer

I ve been successful in getting this to work when I set the margins of the container to 0    container      margin  0 px      in addition to all your other styles

User · Answer

I think  works fine in Firefox  is in the Quirks mode rendering only  In the Standard mode rendering  that might not work fine in Firefox too   percentage depends on  containing block   instead of viewport   CSS Specification says     The percentage is calculated with   respect to the height of the generated   box s containing block  If the height   of the containing block is not   specified explicitly  i e   it depends   on content height   and this element   is not absolutely positioned  the   value computes to  auto     so   container   height  auto     container  mainContentsWrapper   height  n      container  sidebarWrapper   height  n       means   container   height  auto     container  mainContentsWrapper   height  auto     container  sidebarWrapper   height  auto      To stretch to 100  height of viewport  you need to specify the height of the containing block  in this case  it s  container   Moreover  you also need to specify the height to body and html  because initial Containing Block is  UA-dependent    All you need is     html  body   height 100      container   height 100

User · Answer

I don t think IE supports the use of auto for setting height   width  so you could try giving this a numeric value  like Jarett suggests    Also  it doesn t look like you are clearing your floats properly  Try adding this to your CSS for  container    container       height 100       width 100       overflow hidden         for IE        zoom 1

User · Answer

I m not sure what problem you are solving  but when I have two side by side containers that need to be the same height  I run a little javascript on page load that finds the maximum height of the two and explicitly sets the other to the same height   It seems to me that height  100  might just mean  make it the size needed to fully contain the content  when what you really want is  make both the size of the largest content    Note  you ll need to resize them again if anything happens on the page to change their height -- like a validation summary being made visible or a collapsible menu opening

User · Answer

I don t think IE supports the use of auto for setting height   width  so you could try giving this a numeric value  like Jarett suggests    Also  it doesn t look like you are clearing your floats properly  Try adding this to your CSS for  container    container       height 100       width 100       overflow hidden         for IE        zoom 1

User · Answer

I think  works fine in Firefox  is in the Quirks mode rendering only  In the Standard mode rendering  that might not work fine in Firefox too   percentage depends on  containing block   instead of viewport   CSS Specification says     The percentage is calculated with   respect to the height of the generated   box s containing block  If the height   of the containing block is not   specified explicitly  i e   it depends   on content height   and this element   is not absolutely positioned  the   value computes to  auto     so   container   height  auto     container  mainContentsWrapper   height  n      container  sidebarWrapper   height  n       means   container   height  auto     container  mainContentsWrapper   height  auto     container  sidebarWrapper   height  auto      To stretch to 100  height of viewport  you need to specify the height of the containing block  in this case  it s  container   Moreover  you also need to specify the height to body and html  because initial Containing Block is  UA-dependent    All you need is     html  body   height 100      container   height 100

User · Answer

I ve done something very similar to what  tvanfosson  said  that is  actually using JavaScript to constantly monitor the available height in the window via events like onresize  and use that information to change the container size accordingly  as pixels rather than percentage     Keep in mind  this does mean a JavaScript dependency  and it isn t as smooth as a CSS solution  You d also need to ensure that the JavaScript function is capable of correctly returning the window dimensions across all major browsers   Let us know if one of the previously mentioned CSS solutions work  as it sounds like a better way to fix the problem

User · Answer

Its hard to give you a good answer  without seeing the html that you are actually using   Are you outputting a doctype   using standards mode rendering   Without actually being able to look into a html repro  that would be my first guess for a html interpretation difference between firefox and internet explorer

User · Answer

You might have to put one or both of   html   height 100       or  body   height 100       EDIT  Whoops  didn t notice they were floated  You just need to float the container

[html] Div 100% height works on Firefox but not in IE

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to firefox