CSS Forum

**Noobstein** · 05-25-2007, 11:12 PM

I set the height dimensions of the div. Then when I added some padding, it changed the height. I thought it was just going to move everything inside the box 5 px away from the borders. It did that, but it also expanded the ******n box!

Quote:

.content
{
height: 304px;
background: #F7EFC9 url(images/bulbback4.jpg);
background-position: right top;
background-repeat: no-repeat;
border-width: 10px;
border-style: solid;
border-color: #F4E598;
text-align:left;
font-family: Tahoma, Arial;

scrollbar-3dlight-color:blue;
scrollbar-arrow-color:black;
scrollbar-track-color:#F4E598;
scrollbar-darkshadow-color:;
scrollbar-face-color:#F7EFC9;
scrollbar-highlight-color:white;
scrollbar-shadow-color:black;

position: static;
overflow: auto;
padding: 5px;
}

**LadynRed** · 12:04 PM

I'm assuming you're seeing this behavior in IE ??
It is because of IE's broken box model.
An article about this box model problem:
http://www.communitymx.com/content/a...989953B6F20B41

Quote:

According to the W3C specs, the width of the white content area between the grey padding zones is 100px. The padding, borders and margins are added on to the outside of the "width", to arrive at a total of 130px for the visible bordered box dimension, or 150px from outer (purple) margin edge to outer margin edge.

**Noobstein** · 05-26-2007, 08:03 PM

Problem is with both browsers actually LadynRed,

It sticks out more with firefox because I've wrapped the div (with the padding) in another div, and in IE6 the outer div automatically expands with it, whereas in firefox, the inner div overlaps the outer div.

me not understand

**taketherisk** · 05-26-2007, 10:58 PM

Try this code:

Tell me how you go with it.

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.content {
  height: 304px;
  background: #F7EFC9 url(images/bulbback4.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  border-width: 10px;
  border-style: solid;
  border-color: #F4E598;
  text-align:left;
  font-family: Tahoma, Arial;

  scrollbar-3dlight-color:blue;
  scrollbar-arrow-color:black;
  scrollbar-track-color:#F4E598;
  scrollbar-darkshadow-color:;
  scrollbar-face-color:#F7EFC9;
  scrollbar-highlight-color:white;
  scrollbar-shadow-color:black;

  position: static;
  overflow: auto;
}
.innercontent {
   padding: 5px; 
}
-->
</style>

</head>
<body>

<div class="content"><div class="innercontent">

Hello i have 5px padding and a height of 304px

</div></div>

</body>
</html>

**Noobstein** · 11:20 PM

^that was a good test to see if it would again expand the box, and it didn't. thank you. It's certainly a legitimate work around if I weren't obsessed with finding out why this happens.

My question about why the text padding expands the entire div remains unanswered. Any clues as to why this happens when my height is clearly set?

Can I surmise that the padding property overides the height property?

**taketherisk** · 05-26-2007, 11:29 PM

Quote:

Can I surmise that the padding property overides the height property?

Not quite. The padding property adds onto the height property in Internet Explorer. The code i gave you is cross browser.

Firefox does not add padding to the height, but because you gave the outside div some padding, that will make it the inside div height + the padding of the outside one = The height of the outside div.