CODEWITHSUNDEEP
htmlcssscrollbarpositioning
Rich
Rich

Reputation: 1156

How can I prevent horizontal scrolling when child elements extend beyond the width of the parent div?

I've created a banner for my website that's made up of 3 iPhone images side-by-side, using background images and relative positioning for each. However, I'm having issues with the horizontal scrolling. That is even though the div's containing each iphone image extend beyond the width of the parent .content div, I don't want there to be a scrollbar when the overflow content isn't able to fit the browser width. Scrollbars should only be shown if the browser width is below 960px.

A similar effect is presently seen on Apple's homepage, where the hand/wrist reside "outside" the website's container, but no horizontal scrollbars are visible unless the browser's width is below 990px wide.

I hope I've explained this clearly, please let me know if it's not clear.

Here's the code I'm using:

<div class="content">
    <div id="iphone-a"></div>
    <div id="iphone-b"></div>           
    <div id="iphone-c"></div>
</div>

.content {
    margin: 0 auto;
    width: 960px;
    height: auto;
    text-align: left;
    overflow-x: visible;
    }

#iphone-a {
    z-index: 1;
    position: relative;
    left: 50%;
    bottom: 0;
    margin-left: -306px;
    height: 657px;
    width: 590px;
    background: url(images/banner.png) 0px 0px;
    }

#iphone-b {
    z-index: 0;
    position: relative;
    top: -545px;
    left: 50%;
    margin-left: -732px;
    height: 319px;
    width: 590px;
    background: url(images/banner.png) 0px -658px;
    }

#iphone-c {
    z-index: 0;
    position: relative;
    top: -864px;
    left: 50%;
    margin-left: 144px;
    height: 319px;
    width: 590px;
    background: url(images/banner.png) 0px -658px;  
    }

Upvotes: 1

Views: 1881

Answers (1)

Anonymous
Anonymous

Reputation: 572

change

overflow-x: visible;

in .content to 

overflow-x : hidden;

Edit : If that's not what u mean, and u just want visible to work correctly try using overflow instead of overflow-x

Upvotes: 1

Related Questions