Forums

shavenraver

Hi,

http://www.paulstroudmusic.co.uk/BASE/index.html

If you take a look at the page above you'll see that the 1010px wide image sits 15% from the left of its container div. If the page width is less than this no scroll bars appear - and this is what I want.

However, if you narrow the browser window to less than the box under the word "TEST", then scroll right, you'll see that the upper background image doesn't continue

After much experimentation and hunting around for an answer, I'm hoping one of you might throw some light on the problem

Thanks

shavenraver

Sorry - have this too :)

Markup<body>
	<DIV id="theHeader">
                
                <div id="fullHeader">
                
			<div id="centerHeaderBg"> </div>
                    
                        <div id="bottomBorder" class="headerBorder"> </div>
                        <div id="topBorder" class="headerBorder"> </div>
                        <div id="paulStroudImageWrap">
                        	<div id="compMuse">
			    	</div>
                        </div>
                
                    
                </div><!--fullHeader-->
	</DIV><!--theHeader-->
<NAV class="mainNav">
TEST
</NAV>

CSS

* {
	margin: 0;
	padding: 0;
}
body {
	font: 14px/1.4 Georgia, serif;
	background-color:black;

}
article, aside, figure, footer, header, nav, section {
	display: block;
}

nav {
	color:white;
	text-align:center;
	font-size:100px;
}
#page-wrap {
	margin: 50px auto;
	background-color:black;
}
#theHeader{
}
#fullHeader {
	position:relative;
	/*background:url(../images/header-bg.jpg);*/
	background-color:#C93;
	height:400px;
	overflow:hidden;
}


#centerHeaderBg	{
	height:400px;
	background:url(../images/header-main-bg.jpg);
	background-repeat:repeat-x;
	background-position:top;
	position:absolute;
	left:15%;
	margin:auto;
	min-width:1010px;
        min-height:50%;

}

noahgelman

I'm confused as to what is even the matter. No ones browser window is only going to be a couple hundred wide. No one will ever run into this problem.

chrisburton

Are you talking about the tan or black?

p.s. I'm pretty sure you can condense half of your divs

shavenraver

The black. The tan area will be a repeated background image - it's tan for illustration purposes.

re:ps -Yeah - theHeader is certainly surplus. But there is stuff in the markup I've deliberately taken out of the CSS.

@noahgelman - You're right but that box under "TEST" could be closer to a 980px blog post when I'm done with the rest of the page.

Also, on a zoomed-in browser the "cut-off" is perhaps worse.

I just feel that I've gone about this all wrong

wolfcry911

I just feel that I've gone about this all wrong
I feel you may have also, but given the information you've shared a solution is to place min-width: 700px on the body

The div being cut off has a width of auto which defaults to 100% of the body (minus margin, border, and padding). The body is viewport width, so when the viewport is smaller than 700px (the width of the lower div), the div in question also is smaller - including its background, even when scrolled.

shavenraver

Thanks wolfcry - that works fine. It would be nice to get it "right" though. I don't have a problem with starting again with this.

Could someone be kind enough to suggest a better way to construct this?

wolfcry911

Do you have a better example of what you're trying to accomplish? Why is the banner 15% from the left and the rest of the content centered? Perhaps what you have actually is the best way, but it just seems a bit odd (realizing of course that you're page is just a testbed).

shavenraver

Yeah - it seems fine. May be I should just leave it like this and move on.

The reason for the 15% is that there are other elements that have different relationships with the wrap div.

Thanks very much for your time.

treehouse : what would you like to learn today?

Forums

background image - overflow puzzle