Menu
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?
545
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.
80
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/
32
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
