CODEWITHSUNDEEP
htmlcsspadding
Perocat
Perocat

Reputation: 1521

If padding is inside, why will the div be wider with padding?

I have this div on the CSS:

#bodycontent {
    max-width:980px;
    margin:auto; 
}

#navleft {
    width:18%;   
    border:0px;
    float:left;
}

#rightcontent {
    max-width:80%;
    border:0px;
    float:right;
}

and on the HTML:

<div id="bodycontent">
    <div id="navleft">
        some stuff
    </div>
    <div id="rightcontent">
        some stuff
    </div>
</div>

Now I have 2 problems:

  1. If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
  2. I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.

Why? The padding is not inside?

Upvotes: 4

Views: 7065

Answers (3)

Jared
Jared

Reputation: 12524

The problem you are facing is because of the box model. The width you declare is the width of the content and not the true width of the element.

To learn more about the box model

To change this so that the border and padding are all part of the elements width you can use border-box

#your-element { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box; 
}

Upvotes: 4

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

Read about the css box model.

Your content is the inner-most box, and it will have the width you specify. Padding, border, and margin are all added to this width. Padding will be inside the border, but not inside the content width.

Upvotes: 2

Quentin
Quentin

Reputation: 943175

The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.

In CSS 3, you can change this with the box-sizing property but this has limited support.

Upvotes: 6

Related Questions