Latest News: (loading..)

Archived

This topic is now archived and is closed to further replies.

Rachel Brex

How to make header and footer width 100%

3 posts in this topic

Hi, this is my shop's current layout below. I'd like to make the width of the header and footer 100% instead of 960px or at least make a header/footer wrapper that is 100% and the header/footer content's width 960px so that the bottom border extends the full length of the browser. (Hope that makes sense, I've tried to illustrate this with the red borders)

 

How can I do this? What should I be changing in the 960_24_col css, if that's even the way to go about it.

 

xlwnie.jpg

Share this post


Link to post
Share on other sites

Take the header and footer outside of the container_24

 

You may then need to amend the code inside the header and footer to display nicely.

 

/includes/template_top.php

/includes/template_bottom.php

 

The alternative is the stay within the 960 boundary and simply make a false background, example:

 

http://oscbooks.com/style/231-large.gif - the 960 ends at the vertical black lines - the tiny bits of green outside those black lines extend across the full browser (they are cut off in the image).

 

Another alternative is to dump the 960 fixed width and use a fluid 960 instead - have a hunt in Google.

For that I used .css to place the

Share this post


Link to post
Share on other sites

Ah thank you! The first solution worked and no tweaking was needed. Perfect.

Share this post


Link to post
Share on other sites