CSS Horizontal Scroll?

Question

I'm trying to keep my page from having to horizontally scroll.

When I add my navbar and header div to my page, everything works fine. However, when I add my content div it forces my page to scroll left and right. It's no wider than my header so why is this happening?

Here is my code:

body {
    min-width: 1024px;
    min-height: 700px;
    max-width: 1920px;
    max-height: 1080px;

    width: 100%;
    height: 100%;

    margin: 0 auto;

    background: url(/style/images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    <!-- FOR IE -->
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

.overlay {
    width: 100%;
    height: 100%;

    -webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
     -moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
     box-shadow: inset 0 0 5px rgba(68,105,244,.45);


}

.divstyle {
    background-color: rgba(247,247,247,.9);

    -webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
}

#navbar {
    height: 50px;
    min-width: 1600px;
    width: 100%;
    margin-bottom: 50px;

}

#header {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    border-radius: 5px;
}

#content {
    width: 1000px;
    min-height: 500px;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 5px; 
}

Here's my html:

<div id="navbar" class="divstyle">
    <div class="overlay">
    </div>      
</div>

<div id="header" class="divstyle">
    <div class="overlay">
    </div>      
</div>

<div id="content" class="divstyle">
    <div class="overlay">
    </div>      
</div>

http://jsfiddle.net/9mRHT/

Could you link to your page? I tried reconstructing via code pen and without data there's no issue — vol7ron
– vol7ron, Commented May 16, 2014 at 16:14
The content div is 1000px wide...how big is the screen you're testing on? If it's not that wide (and it probably should be in the year 2014) you're going to get a scrollbar. — JesseEarley
– JesseEarley, Commented May 16, 2014 at 16:16

mohamedrias · Accepted Answer · 2014-05-16 16:16:28Z

5

It is because of min-width: 1600px; present in

#navbar {
height: 50px;
/* min-width: 1600px; */
width: 100%;
margin-bottom: 50px;
}

This will remove the horizontal scrollbar

answered May 16, 2014 at 16:16

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1527185 Over a year ago

yup, i must have overlooked that. I don't even remember adding that in there haha. Thanks for the help!

Collectives™ on Stack Overflow

CSS Horizontal Scroll?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related