Boltz0r Boltz0r - 8 months ago 19
HTML Question

Wrong width of page unecessary scroll

I'm having trouble with this layout, everything looks good, however the page goes further right with nothing but blank. I tried everything nothing works. {
left: 240px;

#sidebar ul li a {
padding: 15px 20px;
height: 100%;
font-size: 16px;
font-weight: 100;
color: white;
background: #1a1a1a;
text-decoration: none;
display: block;
border-bottom: 1px solid #1a1a1a;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;

.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;


<div class="container open-sidebar">
<div id="sidebar">

This is what forces the problem. Thats the first div and then everything shifts from the left which makes a blank space on the right.

How do i fix this? Thanks


This rule that you are using {
  left: 240px;

moves that DIV 240px to the right, but there it still a width of 100%, so it will extend the width of the parent container on the right side by 240px.

If you add width: calc(100% - 240px);, it should solve your problem.