CSS 100% width is more that 100%
Question
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div { border-radius: 10px; } #header { z-index: 1; background-color: #80B7ED; height: 50px; width: 100%; position: fixed; } .left { background-color: #5A9DE0; height: 400px; width: 20%; float: left; position: relative; } .right { background-color: #BFD9F2; height: 400px; width: 80%; float: right; position: relative; } #footer { background-color: #80B7ED; clear: both; height:70px; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title></title> </head> <body> <div id="header"> </div> <div class="left"> </div> <div class="right"> </div> <div id="footer"> </div> </body> </html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller . If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body { margin: 0; } div { border-radius: 10px; } #header { z-index: 1; background-color: #80B7ED; border-top-left-radius: 0; border-top-right-radius: 0; top: 0; height: 50px; width: 100%; position: fixed; } .left { background-color: #5A9DE0; height: 400px; width: 20%; float: left; position: relative; } .right { background-color: #BFD9F2; height: 400px; width: 80%; float: right; position: relative; } #footer { background-color: #80B7ED; clear: both; height:70px; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title></title> </head> <body> <div id="header"> </div> <div class="left"> </div> <div class="right"> </div> <div id="footer"> </div> </body> </html>
Thanks
3 answers
solution1
8 2014-09-23 19:46:19
When using percentage widths the margin , padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border . Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
solution2
1 ACCPTED 2014-09-23 20:16:35
Here you go:
body{ margin:0px; } div { border-radius: 10px; } #wrapper { padding: 0%; } #wrap { float: left; position: relative; width: 100%; } #header { position:fixed; width:inherit; z-index:1; padding:0px; height:50px; border-radius:10px; background-color: #80B7ED; } .left { background-color: #5A9DE0; height: 400px; width: 20%; float: left; position: relative; } .right { background-color: #BFD9F2; height: 400px; width: 80%; float: right; position: relative; } #footer { background-color: #80B7ED; clear: both; height:70px; }
<html> <body> <div id="wrapper"> <div id="wrap"> <div id="header"></div> </div> </div> <div class="left"></div> <div class="right"></div> <div id="footer"></div> </body> </html>
See here jsfiddle
EDIT :
If you wish to add a margin, I'd suggest you add a variable margin , for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
solution3
0 2018-02-14 19:45:30
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.