We help IT Professionals succeed at work.

CSS Footer & Content layout methodology

RegProctor asked
Last Modified: 2009-12-16

This is only my 2nd CSS project. The first one I copied a lot of things but didn't really learn it properly as it was a rush job. This time I am trying to really understand how to go about thing and I am coding every line myself. However, at this point I would sure appreciate someone "in the know" making some suggestions on what I have so far as I feel getting it right at this point will set a good foundation to move forward.

This is my code so far: http://capiogroup.com/testing/page.tpl.html

The point where I am up to now looks fine to me but I am concerned about a couple of compromises I have made in getting to this layout and would appreciate any feedback from the experts.

First, there are a couple of things that could be much better that I not ready to deal with just yet. They are:

-It's only coded for Firefox right now. I.E. fixes will come later although it almost looks right in I.E7 already.

-I use 3-4 CSS files and it could all be in 1 file. Right now it's helping me be organized in my thinking this way but I fully appreciate someone better acquainted with CSS could put it all in one file quite comfortably, especially the small amount I have so far.

-The use of graphics is not optimized at all. Especially where I am just putting navigation graphics over an existing graphic.

Now my concerns:
- The upper outer graphic overlaps content area (header part) at the top. If there is a better way to achieve this than what I have done, please do tell. Right now I just put the graphics to be overlapped onto the body as a Fixed position type element. Then I put a relative Div element overlapping it.

- I wrapped the header, content and footer div's all in another div to make the work together. I don't know if that is the best way to do things but it seemed more complicated than when I was trying not to. Whether this is acceptable to those that know or not I would certainly value an opinion.

- The footer text is indented and I don't actually know why. It looks like the para. text is inheriting the Left value of the outer div.

- I set the graphic in the content area as Float: Left and then had the contents right of the graphic. If there is a more appropriate way to handle this I would appreciate knowing.

- The way I got the footer to float at the bottom of the content area seems like a hard way to do things and I suspect there is a simpler way than what I have done. Also, it has an anomaly I don't understand because the footer overlaps the content area by 2 pixels. I haven't been able to figure out why.

-And of course just in general if the code looks okay as a starting point.

Many thanks for anyone who's willing to have a quick look. It's just a small amount of code and won't take much to look through.

Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
This one is on us!
(Get your first solution completely free - no credit card required)



Thanks so much for comments. I agree with both of your about the multiple files. I only mentioned it because in my last project when I asked a question someone told me to cut them down. In that case it wasn't really possible because I was working with a web CMS that just did things a certain way.

That tutorial is magic! It puts all the little things I've been working on right at the finger tips.

Oceanbeach'es comments have been very useful too.

Thanks guys!
Glad to help!


I've updated it (http://capiogroup.com/testing/page.tpl.html) and from all you have told me I am feeling comfortable with how this is is now.

I've chosen to limit this to working on ie6, ie7 and Firefox 2. That should cover most users. I guess I've got to get into the dirty business of handling I.E. quirks now.

Thanks again.


Just thought I would post an (almost) final file after all the help.

Only things left optimizing for better use of graphics and bottom links will rollover when I get the rest of the graphics (from the designer) but the code is already set up.

All comments welcome!

Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.