CODEWITHSUNDEEP
htmlcss
Boltz0r
Boltz0r

Reputation: 980

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.

.container.open-sidebar {
  position: relative;
  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;
}

HTML: 

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

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

Upvotes: 0

Views: 67

Answers (1)

Johannes
Johannes

Reputation: 67748

This rule that you are using

.container.open-sidebar {
  position:relative;
  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.

Upvotes: 1

Related Questions