CODEWITHSUNDEEP
htmlcss
Miranda Roberts
Miranda Roberts

Reputation: 341

CSS - What's causing this horizontal scrollbar?

I am creating a site with some nested divs. The navigation bar has been creating an awful horizontal scrollbar. So far I've tried defining the widths of the divs with no luck. I also tried setting a max-width, but that didn't work either.

While I know I could hide the x-overflow, that just seems like a bandaid fix that could cause more problems later on.

Here's a picture of the pesky scrollbar/layout - https://i.sstatic.net/t7Qul.png

When I inspect element in chrome, it seems that the life_link might be the issue, but I just can't find what's causing it. ):

HTML

<div id='nav'>
    <div id='button_wrapper_r'>
        <span class='navlink'><a href="#">characters</a></span>
        <span class='navlink'><a href="#">guidebook</a></span>
        <span class='navlink'><a href="#">faq</a></span>
    </div>

    <div id='life_link'><a href="/index.php">LIFE</a></div>

    <div id='button_wrapper_l'>
        <span class='navlink'><a href="#">modbox</a></span>
        <span class='navlink'><a href="#">packs</a></span>
        <span class='navlink'><a href="#">members</a></span>
    </div>
</div>

CSS

#nav {
background-image:url("/images/nav_bar.png");
width: 1027px;
height: 151px;
margin-top: 335px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
max-width: 1027px;
}

#nav a {
color: #bd916f;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Amaranth;
text-decoration: none;
font-size: 20px;
margin: 20px;
}

#nav a:hover {
color: #eff9ce;
}

#button_wrapper_r {
position: relative;
top: 54px;
left: 26px;
z-index: 3;
}

#button_wrapper_l {
position: relative;
top: -37px;
left: 620px;
z-index: 3;
}

#life_link {
position: relative;
top: 8px;
left: 460px;
z-index: 3;
}

#life_link a {
font-family: 'Cinzel Decorative', cursive;
font-size: 50px;
}

.navlink {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
 overflow: hidden;
 }
.navlink:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #9bd4bb;
 height: 2px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.navlink:hover:before, .navlink:focus:before, .navlink:active:before {
 left: 0;
 right: 0;
}

Upvotes: 0

Views: 105

Answers (1)

Vlad DX
Vlad DX

Reputation: 4730

#button_wrapper_l got the same width as your #nav. But then you moving it to the right by position: relative; left: 620px; and get invisible part of that getting through the right side of the #nav element, extending the width of the page.

UPD

I made a JSFiddle using another way to construct your menu – without any relative positions: https://jsfiddle.net/LpbLmmvv/

But there is small problem with width. It doesn't fit your 1027px.

You'd better use flex instead (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). But keep in mind it's browser support – http://caniuse.com/#search=flex

Upvotes: 1

Related Questions