All geek questions in one place

Why 15% + 85% do not give 100%. HTML / css web layout

An absolute newbie to HTML. This is a layout issue. I have a title width 100% What I want to have a nav section for navigation, which should be 15% page, and the remaining 85% should display some content. Finishing a webpage with a 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 get what I interpret, since 15% and 85% are not 100% equal (WTH lower with respect to nav ? I tested 83%, but the correct one, but the "red" does not completely overlap with the header

enter image description here

What should I do to do it right?

+5
source share
6 answers

The problem is that the add is being added to your container width. Thus, its width is 85% + 5 pixels on each side, which leads to a larger width than 85%.

You can fix this 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 would not recommend using inline-bock and float for one element. You must choose either a floating or an inline block.

+7
source

Write this in the section and nav:

  #section , #nav { box-sizing:border-box; }

This is because padding is counted as the total width (and the border too), but without it, padding and border increase the width

And please do not mix floats with elements of the built-in unit.

+3
source

Apply box-sizing to all elements. This will help you easily calculate width , height , margin , padding , border .

 * { box-sizing:border-box; }

Above, '*' selects all the elements and it will be applied to each of the elements that you have.

Read this for more information - https://css-tricks.com/box-sizing/

+1
source

If nav float: left , section should also be float: left .

0
source

This is because padding:5px; in classes #section and #nav

0
source

This is due to padding . So change with that.

 #nav { line-height:30px; background-color:#eeeeee; height:300px; width:15%; float:left; display:inline-block; } #section { float:left; background-color: red; width:85%; display:inline-block; }
0
source

Source: https://habr.com/ru/post/1233317/

More articles:


All Articles