CSS Box模型宽度问题

Question

I am newbiew to css. Please have a look of this simple two column layout first.

http://www.vanseodesign.com/blog/demo/2-col-css.html

I want to ask why the width of content + width of sidebar =/= width of container?

Answer 1

Width of content = 610px

Width of padding in content = 5+5 = 10px

Total width of content = 620px

Similarly Total width of sidebar with padding = 340px

So total content and sidebar = 620+340 = 960px which is equal to width of container !

Answer 2

The W3C specification says that the width of a box is: margin + border + padding + width. In this way you'll be able to determine the actual box width.

If you sum the resulting box widths you will have a result equal to the container width.

Answer 3

Without seeing your code it's hard to give you an answer. But some basic CSS and html is below which will give you a content area the same size as your header, see it in action here http://jsfiddle.net/peter/wZQNY/

The CSS

.container{
    margin:0 auto;
    width:960px;
}
.header{
    width:100%;
    background:#eee;
}
.content{
    width:100%;
    background:#ccc;
}

The HTML

<div class="container">
    <div class="header">header navigation</div>
    <div class="content">page content</div>
</div>

Answer 4

I can't see the problem. In your link, the content.width + sidebar.width == container.width

What's your problem? what browser are you using?

---

A possible solution is that you may have some weird behavior due to border or margins, for that, you should apply a CSS Reset .