CSS Width doesn't match up in page - html

Question

I have two divs contained within a larger div as follows:
<div class="content-container">
<div id="content">
Bunch of text ... omitted
</div>
<div id="sidebar">
</div>
</div>
The css corresponding to these two are as follows (slightly edited for length):
#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}
#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}
.content-container {
position: relative;
width: 978px;
height: 1060px;
}
I have read that the width attribute does not include padding. When I load the page up in Chrome and inspect the elements, content has a width of 705, instead of the expect 720. However, sidebar has the correct width of 198px. Does anyone have an explanation?

Answer 1

Does anyone have an explanation?
It's because of the scrollbar (resulting from overflow: auto).
There are some cross-browser inconsistencies related to the scrollbar and how it is included in the width calculations. In Chrome and Safari, the width of the scrollbar isn't included in the content width, whereas in Firefox and IE, the width of the scrollbar is included in the content width.
In the jsFiddle example that you provided, you will notice that the content width is 717px in Chrome after removing the scrollbar. With the scrollbar, 15px will be subtracted from the content width (resulting in 702px).

Answer 2

try to clear any possible default margin or padding for the parent div:
.content-container {
margin:0px;
padding:0px;
}