CODEWITHSUNDEEP
cssimageheaderscrollwidth
TheImaginative
TheImaginative

Reputation: 77

Why is horizontal scroll bar going far beyond content?

I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.

When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?

Here is the site: http://beautyintheweeds.com/

Here is the HTML and CSS:

<?php wp_head(); ?>
</head>

<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp-    content/themes/journalist/images/longtop.jpg"/></div></div>

div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}

This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?

Thanks.

Upvotes: 0

Views: 2858

Answers (4)

Patrick James McDougle
Patrick James McDougle

Reputation: 2062

I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.

Upvotes: 0

Jitender
Jitender

Reputation: 7971

Try this 

#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}

Upvotes: 1

AspiringCanadian
AspiringCanadian

Reputation: 1665

http://jsfiddle.net/pWDrD/

You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.

Upvotes: 0

Guffa
Guffa

Reputation: 700322

It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.

If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.

Upvotes: 2

Related Questions