Using %width

HTML & CSS
1

Let’s say I have two div inside another:

<div class="outside">
<div class="inside">
</div>
<div class="inside">
<div class="clear"></div>
</div>

And let’s say I want my inside-divs to be the exact same width as each other, but the outside div has a border and padding.

.clear {
clear:both;
}

.outside {
width:400px;
border:1px;
padding:9px;
}

.inside {
padding:0px;
margin:0px;
width:50%;
float:left;
}

Will the width calculation for the .inside take into account the border and padding? Will it be 50% of 400 (200 px wide) or will it be 50% of (400-border-padding) = 50% of 380 = 190px wide?

2

I may be wrong, but as far as I know, it won’t.
I remember having to hack it with JavaScript in the past to calculate the correct sizes based on padding and border, but that’s before the CSS3 days…

3

The explanation is a bit convoluted but hopefully it will make sense.

Assume I I am talking about BLOCK elements as inline elements dont actually have width.

By default, a child element is 100% of the AVAILABLE width.
For example: if the calculated with of the parent is 1000px , 0px padding, then the child element will be 1000px
if the calculated with of the parent is 1000px=(700px width + 300px padding) then the child element will be 700px. In other words, width of child=100% width of parent ( not calculated width)

Here is where it gets tricky.

If you add padding to an element with no width declared then the calculated width ( that is width+padding) =100% of the parent
BUT
If you add padding to an element with width declared then the calculated width could overflow the parent, which is what you are probably referring to in your question

For example:
If the calculated with of the parent is 1000px=700px width +300px padding
and you have a child element ( no width declared), to which you add 300px padding then the calculated width of the child element will STILL be 700px, leaving only 400px for content. But if you set the with of the child to :100%, then the calculated width will be the same as the parent that is : 700px + 300px padding. An important note , if you do this, is that the element will overflow the parent rightward ( not centered) ( in other words the padding on the left will not overlap, you will need positioning or negative margins to suck it back into place).

Hopefully this helps clear up things for you.

4

[font=verdana][ot]Would it not have taken you less time just to try this and see what happened?[/ot]
The width is the width of the content area, excluding borders, padding and margins.

So if you have

<div class="outside">
<div class="inside">First inner box</div>
<div class="inside">Second inner box</div>
</div>

.outside {width:400px; border:1px solid; padding:9px; overflow:hidden;}
.inside {width:50%; float:left;}

then you will have two inner boxes sitting side-by-side within the ‘outside’ div. Each inside div takes the width of 50% of the outside div, giving it 200px, which sits nicely inside the outside div, which has a content width of 400px and an overall width (including padding and borders) of 420px. All well and good so far.

But … as soon as you add any padding or border to the inside divs, that is added to their content width of 200px, meaning that they now take up more space than 200px and so don’t fit side-by-side in a 400px wrapper.

There is a sneaky solution to this! :shifty: OK, it isn’t that sneaky…

<div class="outside">
<div class="inside"><div>First inner box</div></div>
<div class="inside"><div>Second inner box</div></div>
</div>

.outside {width:400px; border:1px solid red; padding:9px; overflow:hidden;}
.inside {width:50%; float:left;}
.inside div {border:1px solid green; padding:5px;}

and that means that the innermost divs adapt to the available width, leaving you width a border and padding that doesn’t go beyond the 200px content width of <div class=“inside”>[/font]

5

thank you stevie D.