CSS Width doesn't match up in page

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?

i got 720. can you check if there is other things overwriting it? jsfiddle.net/5xdg4qmw — cweitat
– cweitat, Commented Dec 31, 2015 at 3:04
Yes, it should give 720, I think the problem is exclusive to my page. But it's strange because chrome would usually show a slashed out line if the width is overwritten. Not sure where to check. — Abundance
– Abundance, Commented Dec 31, 2015 at 3:08
do you have it a a live site that i can check? thanks or you could include all ur css in a fiddle — cweitat
– cweitat, Commented Dec 31, 2015 at 3:09
are you using box-sizing: border-box? I added that to your fiddle and got 720 px. without box sizing it said 753, 720 (width) + 30 (padding) + 3 (border) — Andrew Axton
– Andrew Axton, Commented Dec 31, 2015 at 3:28
Here's a fiddle with all my source code. I was toying around a bit and made width 717px, but the same problem remains. jsfiddle.net/ztfhkfp3 — Abundance
– Abundance, Commented Dec 31, 2015 at 3:38

Josh Crozier · Accepted Answer · 2015-12-31 03:47:38Z

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

answered Dec 31, 2015 at 3:47

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaher Jamal Eddin · Accepted Answer · 2015-12-31 03:03:09Z

0

try to clear any possible default margin or padding for the parent div:

.content-container {
  margin:0px; 
  padding:0px;
}

answered Dec 31, 2015 at 3:03

Shaher Jamal Eddin

4625 silver badges17 bronze badges

Collectives™ on Stack Overflow

CSS Width doesn't match up in page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related