CODEWITHSUNDEEP
htmlcss
sushibrain
sushibrain

Reputation: 2780

CSS: 100% is larger than page width?

I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:

font-family: 'Champagne';
    font-size:20px;
    display: block;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    background: #0193CF;
    text-align: right;
    padding: 0 2em;
    margin: 0;
    text-transform: capitalize;

But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.

Does anyone have any experience with this?

100% is to large...

Upvotes: 5

Views: 12505

Answers (3)

William Turrell
William Turrell

Reputation: 3326

If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.

My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.

Upvotes: 1

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.

I would suggest using the box-sizing properties in your CSS, like so:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.

Upvotes: 12

Phlume
Phlume

Reputation: 3131

box-sizing:border-box... This basically takes into consideration the margin and padding when calculating the size.

A more detailed explaination on the box-model is outlined for you here:

http://css-tricks.com/box-sizing/

Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".

many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"

Here is one of the more popular ones:

http://meyerweb.com/eric/tools/css/reset/

But this site reviews a lot of them:

http://www.css-reset.com/

Upvotes: 3

Related Questions