Abundance Abundance - 4 years ago 148
HTML Question

CSS Width doesn't match up in page

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?

enter image description here

Answer Source

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download