Take the 2-minute tour ×

Let's say I have to following code -

<div id="outerdiv" 
    style="border: 1px solid blue; height: 150px; width: 150px;">
    <div id="div" style="height: 100%; border: 1px solid black; margin: 5px;">
        <div id="innerdiv" style="height: 100%; 
             border: 1px solid red; margin: 5px;">

This yields the following result in FF/Chrome:


In IE, it's fine. The question is, how do I use 'height:100%' so it looks the way IE renders it in all browsers?

EDIT: Here is the result in IE9 (for me) This is what I would like it to look like in all browsers using height: 100%. Is that even possible?

enter image description here

share|improve this question
Your code gives me the same result on FF and Chrome as the image you provided. What browsers did you have a problem with? –  Yanir Kleiman Jul 7 '11 at 23:47

3 Answers 3

up vote 1 down vote accepted

I'm getting what looks like the first image on my copies of Safari 5.0.4, Chrome 13.0.782.41, and FF 3.5. Which is the expected behavior, but I'm not sure why Gaby and Yanir are seeing otherwise.

An alternate approach to setting height:100% would be to set the top, left, right, and bottom values in a few absolutely positioned divs, like so:

<div id="outerdiv" 
style="border: 1px solid blue; height: 150px; width: 150px; position:relative;">
<div id="div" style="border: 1px solid black; top: 5px; bottom: 5px; left:5px; right:5px; position:absolute;">
    <div id="innerdiv" style="top: 5px; bottom: 5px; left:5px; right:5px; 
         border: 1px solid red; position:absolute;">

See http://jsfiddle.net/gCqqn/

share|improve this answer
Yeah, I keep getting the first image as well. I've concluded that using height or width = 100% is completely impractical... Am I missing something? –  Matt Jul 12 '11 at 5:03
They definitely have their practical uses (width:100% more so), it's just that margin and padding add to the box, and when you're adding to 100% things are going to overflow like they did in your original problem. –  Walter Cameron Jul 13 '11 at 20:18

The problem occurs when you set height:100% for inner divs with margin:5px

You must set margin of a div on percentage basis and reduce the height of inner divs accordingly;

See the working demo: http://jsfiddle.net/GVLNW/2/

share|improve this answer

Well .. it looks the same in all my browsers

share|improve this answer

Your Answer


