CODEWITHSUNDEEP
css
Bear
Bear

Reputation: 5152

CSS Box model width problem

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?

Upvotes: 1

Views: 332

Answers (4)

lucassp
lucassp

Reputation: 4167

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.

Upvotes: 2

Suraj Hazarika
Suraj Hazarika

Reputation: 667

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 !

Upvotes: 3

Madara's Ghost
Madara's Ghost

Reputation: 175098

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.

Upvotes: 1

Anagio
Anagio

Reputation: 3075

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>

Upvotes: 1

Related Questions