Menu
Absolute beginner in HTML. It is a layout question. I have a header of width 100%
Than I want to have a nav section for navigation which should be 15% of the page, than the rest 85% should display some content. Ending webpage with footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="fr, 09 okt 2015 06:20:07 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="mateusz.css">
<title>Nowa strona</title>
</head>
<body>
<div id = "header"> dada</div>
<div id = "nav" class="container"> <h1> ma </h1> </div>
<div id = "section" class="flex-column"> WTH </div>
<div id = "footer"> M </div>
</body>
</html>
style:
body { margin:40px;
padding:5px }
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
height:200px;
width:100%
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
width:100%;
}
But I receive that which I interpret as the 15% and 85% is not equal to 100% (WTH is lower in relation to nav? I tested 83% and than is correct but the "red" does not overlap fully with the header
What should I do to make it right?
747
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
This problem arises when any element - not just the HTML or body element - is set to 100vw (viewport width) units. The viewport units do not account for the approximate 10 pixels that the vertical scrollbar takes up. Therefore, when the vertical scrollbar activates you also get a horizontal scrollbar.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border. So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.
The problem here is that the padding gets added to your container width. So its 85% width + 5px on each side which results in a greater width than 85%.
You can fix that by adding the following code: box-sizing: border-box;
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
box-sizing:border-box;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
box-sizing:border-box;
margin-left:-5px; /* margin-left: -5px has to be done to fix the display:inline-block; default margin*/
}
In addition I wouldn't recommend to use inline-bock and float for one element. You should decide on either float or inline-block.
103
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
