How to prevent horizontal scroll?

Question

Currently my code looks like this

body {
    padding: 0px;
    margin: 0px;
    background-color: #ABA49F;
    font-family: Verdana, Geneva, sans-serif
}
.header_bar {
    width: 100%;
    height: 45px;
    z-index: 1000 !important;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
    height: 22px;
    padding: 7px 40px;
    background-image: linear-gradient(to top, #212121 9%, #181818 100%);
    border-bottom: 2px solid #606060;
}
.header_content {
    width: 50%;
    margin: left;
}
.header_content li {
    list-style: none;
    float: left;
    font-size: 15px;
}
.title li a {
    color: #ffc900 !important;
}
.header_content li a {
    text-decoration: none;
    color: white;
    margin-right: 30px;
}
.header_content a:hover {
    color: #ffc900;
}
.sidebar_frame {
    z-index: 111;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:50px;
    background:#000;
}

<div class="sidebar_frame">aaaa</div>
<div class="header_bar">
    <div class="header_content">
        <div class="title">
            <li><a href=""><b>Farm</b></a>
            </li>
        </div>
        <li><a href="">New farm</a>
        </li>
        <li><a href="">aaaa</a>
        </li>
        <li><a href="">aaaa</a>
        </li>
    </div>
</div>

I tried to make a sidebar with 100% height. I have no idea why the sidebar without z-index is on top of the menu and also why is there some random scrollable space on the pages horizontal axis?

Removing the sidebar cleans the scrollable space.

are you talking about the horizontal scrolling that is going on? — jmore009, Oct 14 '14 at 15:21
scrolling is caused by `.header_bar` having 80px side padding with a width of 100% - try adding `box-sizing:border-box`, and add `position:relative` to it as well - z-index only applies to positioned elements. You have also set 2 heights on it — Pete, Oct 14 '14 at 15:24
Thanks that fixed the scroll issue but the z-index issue is still there. any thoughs? — Raggaer, Oct 14 '14 at 15:27
@alvarocarvajalnakosmai you can change the `z-index` of `.sidebar_frame` to `-1`. — Fahad Hasan, Oct 14 '14 at 15:28

score 2 · Accepted Answer · edited May 23 '17 at 12:12

The sidebar is overlapping the menu because position: absolute elements are removed from the normal flow of the document. This means that the header is positioning itself without regard for the sidebar.

To fix the overlap:

Give a left-margin to .header_bar that is the same width of the sidebar. This accommodates space for the side bar.

To fix the scrolling issue:

Remove the left and right padding from your .header_bar and apply it as left padding to the .title
Remove the 100% width of the .header_bar

A few small improvements:

Remove the <li> and apply the styles directly to the a elements
Remove or increase the width of .header_content
Remove margin: left which does not exist
Place .title a after the other a links properties in the CSS. When property values conflict, the last property declared is the winner. This eliminates the need for !important.
Remove all z-index properties; they are no longer required.

Put that all together and you get this example:

body {
  padding: 0px;
  margin: 0px;
  background-color: #ABA49F;
  font-family: Verdana, Geneva, sans-serif
}
.header_bar {
  height: 45px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
  height: 22px;
  padding: 7px 0;
  background-image: linear-gradient(to top, #212121 9%, #181818 100%);
  border-bottom: 2px solid #606060;
  margin-left: 50px;
}

.header_content .title {
  list-style: none;
  float: left;
  font-size: 15px;
  padding-left: 40px;
}
.header_content a {
  text-decoration: none;
  color: white;
  margin-right: 30px;
  float: left;
}
.title a {
  color: #ffc900;
}
.header_content a:hover {
  color: #ffc900;
}
.sidebar_frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  background: #000;
}

  <div class="sidebar_frame">aaaa</div>
  <div class="header_bar">
    <div class="header_content">
      <div class="title">
        <a href=""><b>Farm</b></a>            
      </div>
      <a href="">New farm</a>          
      <a href="">aaaa</a>          
      <a href="">aaaa</a>          
    </div>
  </div>

score 1 · Answer 2 · answered Oct 14 '14 at 15:28

1

Here's the solution to your problem: jsFiddle. You will need to remove the horizontal padding assigned to .header_bar and change the z-index of .sidebar_frame to -1.

answered Oct 14 '14 at 15:28

Fahad Hasan

10,231
4
29
36

How to prevent horizontal scroll?

2 Answers2