Hi!

I am building a website and I want the header and footer to run along the entire browser.

I've set them to be 100% in width while the remaining page is fixed.

I use only div tags and css. Only problem is, when I size down the browser or set the resolution lower, the right side of the layout gets cut off!! When I scroll to the side it's not there.

 

What am I doing wrong??

 

this is the site: http://www.liberateyourweb.co.uk/

 

Cheers

S

Width: 100% means 100% of whatever window width is showing at the time, so when you scroll sideways you see the footer background stops where the end of teh window was.

 

Edit to width: 1100px; I notice that #container #main #header #h_2 is also 1100px.

div#footer {
border-top: 1px solid #000;
position: relative;
margin-top: -101px;
clear: both;
background-image: url(images/h_bg.gif);
background-repeat: repeat;
width: 1100px; /*100%;*/ 
height: 300;
}

 

If you want it cenetered in larger width resolutions, edit the margin-top to

margin: -101px auto 0 auto;