I’m new with HTMLL/CSS and I’m trying to create a layout in and I (think) calculated perfectly the widths and heights of all my divs but the website seems to be is scrollable horizontally which is undesirable. Do you know why?
The desired output is a fixed sidebar (not scrollable), a header (also fixed) and a body (which will be scrollable)
#left-content {
width: 15vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
border: 1px solid black;
}
#right-content {
width: 85vw;
height: 100vh;
position: absolute;
top: 0;
left: 15vw;
border: 1px solid black;
}
#header {
position: fixed;
height: 10vh;
width: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
text-align: center;
border: 1px solid black;
}
#center-content-footer {
height: 100vh - 10vh;
width: 100%;
position: absolute;
top: 10vh;
left: 0;
border: 1px solid black;
}
#center-content {
height: 100vh - 10vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
#footer {
height: 10vh;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="left-content">
</div>
<div id="right-content">
<div id="header">
<h1>Header</h1>
</div>
<div id="center-content-footer">
<div id="center-content">
</div>
</div>
</div>
</body>
</html>
6
Answers
Border widths are not included in the
widthproperty, so if you add borders you need to subtract that amount from withwidth. I removed all of the borders and it seems to be working as expected, but you could leave the borders there and change width of those elements towidth: calc(85vw - 2px), and that should do the same thing. Also, I added acalc()function around the#center-content-footerand#center-contentheight, but that wasn’t really breaking anything.Here are my changes. But this solution is far from perfect.
Quick Tip: Try to use e.g. google chromes or firefox dev tools. There you can see pretty good which rule is or isn’t applied.
this is because body tag has default margin or padding try to apply
padding:0andmargin:0to bodyYour code is perfectly fine. Just add this to the CSS:
This will include the padding and the border-width in the width of the element. Without this, the padding and border-width are added to the width you set. That’s the reason why you get the unexpected little scrolling.
You don’t need to set
position: fixedon#right-contentor to slightly adjust the widths you already set.Read more about box-sizing.
As said by woundedstevenjones, it comes with the borders not being taken into account on width and height. Using
calc()to have the right size is appropriate, but a simpler solution would be to usebox-sizing: border-box;instead.— https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
You may relay on a grid system to avoid position, sizing and box-sizing.
A reset on body’s margin would be necessary (unless otherwise, see second snippet).
I would also recommand to use tags (HTML5) with a meaning, so the code is easier to read too.
No margin reset on body through grid or flex