Dan Price’s blog
Weblog of a cyber-geek

This problem caused me a lot of pain and some headaches - how could I create a footer on a page that spanned the whole page from one side of the browser to the other? Most modern sites have 100% width footers with different backgrounds to the main body. Of course, with different page sizes, you can’t specify the background to the body tag as you would with the normal site background. Furthermore, if you place the footer inside the container/wrapper div, then it won’t span across 100% of browser

The solution is actually very simple.

Rather than having a single div for the footer, create 2 divs for the footer - one as div that will span the full 100% of the screen, the other similar to the container/wrapper of your main content that adjusts the same as your existing container and is centred. To the outer div (that spans all of the screen), apply the following CSS:

left: 0; // Zeros the div so that it goes from one side of the browser to the other
background: *Insert colour of choice*;

To the other div that you want to move at the same rate as your existing container/wrapper, simply add it as another selector along with the existing container - example:

Existing CSS:
#container {margin: 0 auto;
width: 800px;
overflow: auto;}
New CSS:
#container, footercontainer {margin: 0 auto;
width: 800px;
overflow: auto;}

I hope this helps anyone who had a similar problem to me - I told you the answer was simple in the end (even if I didn’t explain it that well!)

I’ve been reading Stu Nicholl’s CSS Play article recently, entitled “Back To Basics” - I know some of this, but some of it I didn’t know. I’ve been searching for a fix to ensure that the background of my site fills the screen on IE from the top to the bottom, whether or not there is that much content. It’s definitely worth a read in my opinion.

For those members on Webmaster-Talk, you may have noticed I’ve been a bit quiet during the past couple of days. No I haven’t gone mute or lost 3 fingers on each hand, I’ve been busy with a new project.

This ambitious project is a new template download service, Whym Templates, where I hope to upload free templates designed by yours truly for public use. It’s not an original idea, but one difference is that I’m not forcing anyone to place links in the footer.

I hope you’ll all support me with this - it’ll only be useful if people actually download something!

Dan

I’ve finally completed the redesign of my hosting site - the trials and tribulations I’ve faced….

Most of my issues were down to IE6, but I’ve managed to overcome most of them.

The actual redesign background and logo were given to me free from some very helpful people on the forums - who am I to refuse?

I’ve been searching around for a long time to find a solution to IE6’s stupid lack of support for transparent PNGs. I read numerous tutorials to find hacks for IE6, with methods including Javascript, HTC files and the official Microsoft hack. However, I repeatedly disappointingly found I could get none of these working (I’m aware some people did get them to work, but I couldn’t).

Then thanks to a genius on the Webmaster-Talk forums, Adam Senour, I found a fantastic way to get these working on my site. The solution is actually very simply, is purely CSS based and doesn’t involve making any new images! Here we go:

1) Rather than using the img tag in your HTML file, make an empty div tag and give it an ID. For this tutorial, I’ll call it “logo”. (more…)

24ways.org makes for an interesting read for web designers and developers. The site has, as the site name suggests, 24 ways to impress your friends (or visitors in this case) with different techniques, and has articles including CSS, Javascript and image editing. It’s definitely worth a look.

Incidentally, I am working on a redesign of my web hosting site, Whym Web Hosting, because I feel the use of a WYSIWYG editor makes the site less unique, not to mention the unnecessary markup that it chucks out.

If you are interested, you can see the ongoing redesign here. Please bear in mind that my CSS skills aren’t far from non-existent and that I’m still learning XHTML!

Dan