adding borders causes height to increase

border height increase div

[fahadkhowaja]

Hi,

I have three divs vertically stacked together occupying 100% of the container div like so:

div1 height = 8%
div2 height = 89%
div3 height = 3%

When there are no top or bottom borders in any of these divs things work fine. But if any top or bottom border is added the divs together overshoot the containing div. Can someone please explain why this happens!

Thanks a bunch!

[swa66]

It's supposed to do that.

Take a look at the standard:
[w3.org...]

Padding and borders add to the size of the box

Outlines don't take up space, perhaps they might help you.

[fahadkhowaja]

I read that but how I understand it is that margins, borders, padding and content together make up the total height of the block. But if I specify the height of the block as 100px in CSS then adding a 1 px top border should not make the height of the block to be 101px. It should still be 100px but the content height would be adjusted to accommodate the border. Am I completely wrong?

[vincevincevince]

The 'height' you specify is the content height, and not the entire block height.

i.e. the total height space taken up = margins + borders + padding + content

If you start with height:100px then add a 1px top border, you need to reduce your content height to 99px if you want the total height to be 100px.

[fahadkhowaja]

Thanks for the clarification but I think height = borders + padding + content. It does not include margins in height calculations. My problem is that I am specifying content height in percent and border width in pixels. I need the percents because I need to divide the divs in a particular ratio. Is there a way to do this while accounting for the border width as well?

Thanks!

[vincevincevince]

The total space taken up includes the margins - just because it's dead space around the edge of the element, doesn't mean that's not space the element is reserving.

There's no way to combine % and px so that the total adds up to a nice pretty %. I suggest that you try one or more of the following:

Using 'outline' instead of 'border' - outline is NOT added to the height or width but goes on top of the edge.

Instead of the big central DIV, use the 'container' itself for the main content, having already put in the first div (header), and followed by absolutely positioning the bottom div to the bottom of the container.

<div (container) style="position:relative">
-<div (first)>content1</div>
-content2
-<div (third) style="position:absolute;bottom:0px">content3</div>
</div>

Defining the border width in percentage, as best as you can, then subtracting that from the content height percentage

Using tables

Using a background-image to produce borders

Using px sizes for the heights and make it appropriate to your common user resolutions