2 replies [Last post]
microbe
Offline
newbie
Last seen: 9 years 17 weeks ago
Timezone: GMT+10
Joined: 2010-07-21
Posts: 2
Points: 3

Hey there,

Hope someone can figure what is going on here.

I have a page, http://www.bedbugz.com.au//index.php?id=33

What is happening is that when loading, the coloured bar at the top of the page is 100% of the screen width. I expect (and want) it to be 100% of the page width. Now, go and slide the horizontal scroll bar and you will see the colour bar finished at the edge of the screen. i.e. it was 100% screen width.

Now drag a corner of your browser to widen it, the colour bar grows until it fills the screen (and page) and ends up looking right when the browser is as wide as the widest element.

Never seen this behaviour before, anyone got an idea what is happening?

Hopefully it will be a DOH! moment when a stupid error is pointed out, but I can't see it.

Thanks in advance.

(unfinished) CSS is

/* CSS Document */
html, body{
	padding:0;
	margin:0;
	width:100%;
 
}
 
.topBar{
	background-color:#c50a21;
	position:absolute;
	top:0;
	left:0;
	height:248px;
	width:100%;
	z-index:-1;
	margin: 0 auto;
}
.pageWrapper{
	width:100%;
 
}
div.headerWrapper{	
	height:248px;
	width:1833px;	
	margin-left:auto;
	margin-right:auto;	
}
 
div.topLeftWrapper{
	float:left;
	width:800px;
	height:200px;
	position:relative;
	top:10px;
	left:250px;
	zindex:50;
}
div.menuButton{
	position:relative;
	width:200px;
	height:200px;
	left:500px;
	top:50px;
	z-index:100;
	float:left;
}
div.headerLogo{
	float:left;
	margin-top:-200px;
	z-index:5;
}
div.headerCircles{
	top:0;
	zindex:500;
	float:left;
	position:absolute;
}
div.contentWrapper{
	display:block;
	width:1380px;
	margin:220px 0 0 200px;
 
}

HTML is

<body>
 
<div class="pageWrapper">
<div class="topBar">
</div>
<div class="headerWrapper">
 
<div class="topLeftWrapper">
        <img src="images/generic-kids-circle.png" alt="" width="385" height="385" />
    </div>
<div class="headerLogo">
 
        <img src="images/header-logo.png" alt="" width="1833" height="248" />
    </div>
<div class="menuButton">
        <img src="images/about.png" alt="" width="180" height="173" />
    </div>
<div class="headerCircles"><img src="images/circles.png" alt="" width="1835" height="512" />
     </div>
</div>
 
<div class="contentWrapper">
<p>Refoveo euismod valetudo aptent, iaceo defui nisl. Vindico meus usitas ullamcorper refero nostrud interdico, typicus quidne pertineo suscipere luptatum. Camur abbas aliquip interdico feugiat in quidem. Plaga premo quia ut sed vulpes paulatim hendrerit defui odio quidem.</p>
 
<p>Virtus cui euismod, duis 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 48 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

It's overflow of those way

It's overflow of those way too wide images. Cut them down or put them in the background.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

microbe
Offline
newbie
Last seen: 9 years 17 weeks ago
Timezone: GMT+10
Joined: 2010-07-21
Posts: 2
Points: 3

actually, I just fixed

actually, I just fixed it...the trick was min-width:100%;