CSS limitation?: width/height: 100% and margins/padding

div overflows surounding div with 100% width and margins

[timwhunt]

Hi,

I'm trying to create a page with a white div inside a colored div with the colored div forming a border around the white div. I've set the height and width of the outer div, and I thought I could set the height and width of the inner div to 100% and give the inner div a margin to get that border. BUT on Firefox the inner div seems to be exactly the same width as the outer div, so the the left margin pushes it over and the right side of the inner div spills over outside of the inner div. Similar problem with the bottom. Perhaps that's what I should expect if I really understood the standards. Is there a better way to get the inner div to completely fill (width and height) the area within the outer div except set in by the margins of the inner div?

I've tried using padding on the outer div instead of margins on the inner div, but same problem. I know I can set a fixed (px) width and height of the inner div, but I want this to resize if I change just the dimensions of the outer div.

Some of my code in case it helps:
#prefsoutline
{

width: 570px;
height: 620px;
position: relative;
background-color: #DAE2ED;
border: 1px solid #A1B9D0;
}

.prefspane
{
margin: 10px;
background-color: #FFFFFF;
height: 100%;
width: 100%;
}

<-snip->

<div id="prefsoutline">
<div class="prefspane">
Prefs Here!
</div>
</div>

I thought I was finally getting a grip on CSS, but maybe I'm missing someting. BTW, it works the way I had hoped it would on IE, but that kind of comment seems to usually get a response that I'm doing something wrong and IE only works because IE is wrong too. Any help towards doing it right will be greatly appreciated!

-Tim

[Ingolemo]

The width of the box doesn't include the margin (or the padding for that matter), so the box cannot have a width/height of 100% of the parent box plus the 10px margin on each side without being bigger than it's parent.

You said you tried using padding on the parent, but it's working for me:

#prefsoutline{
width:570px;
height:620px;
background-color:#dae2ed;
border:1px solid #a1b9d0;
padding:10px;
position:relative;
}
.prefspane{
background-color:#fff;
height:100%;
width:100%;
}

[timwhunt]

Thanks for the help. I'm sorry, but I wasn't understanding my problem correctly, and thus I didn't describe it correctly. Sorry for the confusion. Of course you're right that it is working with padding. However, I really have 3 nested divs and I only described the inner-most two for simplicity when the problem is really with the outer-most and middle one. Basically it's the analygous problem:

I want an outer-most div to define the overall size of the other divs I'll describe as well as some others I'll leave out. I want the middle div to give me that frame around the inner-most div. With padding of the middle div, the middle div and inner-most divs are working correctly together. The real problem is that I want the middle div to fill the outer-most div but with its padding and width 100% it overflows the outer-most div.

Here's the more complete code:
#prefsframe
{
width: 570px;
height: 620px;
border: 1px solid red;
padding: 20px 0px 0px 0px;
position: absolute;
left: 150px;
top: 40px;
}

#prefsoutline
{
position: relative;
width: 100%;
height: 100%;
background-color: #DAE2ED;
padding: 10px;
border: 1px solid #A1B9D0;
}

.prefspane
{
background-color: #FFFFFF;
height: 100%;
width: 100%
}
<snip>

<div id="prefsframe">
<div id="prefsoutline">
<div class="prefspane">
Prefs Here!
</div>
</div>
</div>

BTW, the padding at the top of the outer-most div is to leave space for some tabs.

It has occured to me that I might get this to work by defining the size of the inner-most div and building up from there, but I'm not sure that will be as convenient for laying out the whole page.

Thanks,
Tim

[timwhunt]

I seem to have fixed the width problem by using width: auto; for the middle div, but height: auto; doesn't fix the overflow I'm still getting at the bottom. Suggestions?

[doodlebee]

Just curious - if the outer div is only mean to create a "border" around the inner one - why don't you just get rid of the outer div, and set a border? Seems like a much simpler solution...

[SanDiegoPaul]

Yep Doodlebee that is exactly what I was thinking. Is there an underlying reason that you want to set thing up this way? It sounds kind of self defeating.

[timwhunt]

Thanks for the question. I want the "border" to have 10px of one color and then a 1px line around that. So it's not a simple solid border. I also plan to place graphics in the corners to create curved borders. Seemed simple enough, but can it be done on Firefox (without resorting to fixed px width/height)?

[Ingolemo]

The effect you're looking for is (I think) achieveable using negative margins, but that's such a messy solution that it would probably be easier just to set the width and height explicitly on the child divs and just make sure you change them all together.

Alternatively, since you're using a fixed width and height (in pixels), you could just create the whole of this double border affect using a single background on a single padded div.

[doodlebee]

Yeah - it can be done. There's a tutorial out there that achieves exactly what you want...but as an alternative, what about using "border-style:groove;"? That'll give you the "double border" look you want.

As for the tutorial...google "CSS double border bigbaer.com" and you'll find it :)

[timwhunt]

Thanks. I found that tutorial,

I've since moved on and defined the size from the inner-most div, but I'll check out the tutorial.

Thanks for the help.

[edit reason] no urls thanks! [/edit]

[edited by: SuzyUK at 2:01 pm (utc) on July 11, 2006]