4 replies [Last post]
ensite
Offline
newbie
Last seen: 11 years 13 weeks ago
Joined: 2008-07-02
Posts: 2
Points: 0

Hi, I'm attempting to create a site with a 100% wide Header and footer.

Creating the header is simple, I insert the bg image into the body CSS:

body {
background: url(images/topbg.gif) repeat-x;
background-color: #333;
}

How do I create the a footer that is always the same height and is 100% wide yet will sit under the main page container? see examples: http://www.connections.ca or http://www.indez.com/

Thanks.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 8 years 12 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

search for sticky footers.

search for sticky footers. if you are using divs, they are block elements, so they will naturally expand to the full width of their container.

mattrossidesigns.com

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 5 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Also ....

Don't underestimate using an "inner" div within your primary layout elements so that you can contain the content within a specific area.

For instance:

<div id="footer">
     <div id="footerInner"></div>
</div>

You can make the #footer be 100% width, then make the #footerInner a defined width and center it in the div. That'll give you the "Indez" look.

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

ensite
Offline
newbie
Last seen: 11 years 13 weeks ago
Joined: 2008-07-02
Posts: 2
Points: 0

Thanks Greg, it works a

Thanks Greg, it works a treat!

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 5 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Hell yeah!

Glad it worked!! Rock on!!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/