Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How to set Footer in the center in correct way?

10:24 pm on Aug 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1002
votes: 0

I have set code for footer like:
#footer {

background: repeat-x scroll center top #000000;
width: 100%;
height: 420px;
text-align: left;
padding: 18px;
color: #555;
line-height: 16px;
#footer div {
max-width: 1330px;
min-width: 1000px;
and its HTML:

<div id="footer">

<div align="center">



How to work this as footer content should be in the center but background colour (100 %) should be seen?
I do not like to use Table...
<table align="center">
10:39 pm on Aug 27, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 289

How badly do you need MSIE? For everyone else, a simple {margin-left: auto} will do it.

max-width: 1330px;
min-width: 1000px;

:: sitting on hands ::
11:16 pm on Aug 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1002
votes: 0

I like to set footer background 100% and all wrap into middle.

Do you have some correct code for this (sample)to test? Issue is that wrap content goes on the left hand side...
4:04 pm on Aug 29, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

align is a deprecated attribute for all elements and (X)html versions.

If you want the footer background 100%, the below should work. I don't see any image, so no need for all the alignment properties ,and I don't know why you have text-align left (?)

Also it kind of depends on the textual alignment nature of the footer. That is, center the links and left/right the paragraphs. That's the solution I have below.

For block elements, use margin auto. For inline elements (such as text) use text-align. So we have a block level div inside the full width footer, then inside that we center the list. This becomes important when you use image-based CSS sprites - those anchors will need to be set to display: block, and you get some weird results when you put a block element inside an inline element (list item.) However, in those cases, you usually know the width of the anchors and can do the math to properly set margins so the effect is "centered."

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#footer { background: #000; width: 100%; height: 420px; padding:
18px; color: #555; line-height: 16px; }
#footer div { max-width: 800px; min-width: 500px; margin: 36px auto
12px auto; }
#footer ul { padding:0; margin:0; font-size: 12px; text-
align:center; }
#footer ul li { display: inline; list-style:none; margin:0; padding-
left: 8px; }
#footer a { color: #fff; text-decoration: none; outline: none; }
#footer p { font-size: 10px; width: 49%; padding:0; margin-left:0;
margin-right:0; }
#credit{ float: left; text-align: left; }
#whatever { float: right; text-align: right; }
.clear-div { clear: both; }
<div id="footer">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/tos">Terms</a></li>
<li><a href="/contact">Contact</a></li>
<div class="clear-div"></div>
<p id="credit">&copy; 2011 Wonderful World of Widgets</p>
<p id="whatever">Don't see the contact link above? <a href="/contact">try this one</a></p>

[edited by: alt131 at 12:36 pm (utc) on Nov 27, 2011]
[edit reason] Side Scroll [/edit]

7:59 am on Aug 30, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1002
votes: 0

thank you. Issue is with banners and all promos content.

I have the following promos CSS code:
#promos1 {
margin: 0 auto;
max-width: 1340px;
width: 998px;

#promoscontaint1 {
position: relative;
background: #34FF89 url('background.png') no-repeat left top;
height: 150px;
border-left: solid 12px #000000;
border-right: solid 11px #000000;
border-bottom: solid 5px #000000;
border-top: solid 5px #000000;

How to set HTML,CSS that these promos images inside elements will work as resolutions are different?
If I place images inside #promoscontaint1 it will not work resize.
For block elements I have used margin auto but see images like sample:
div class="promosimages1">
<img width="317" height="150" alt="" src="">

If I place min-width: 998px;it will be enlarged block element but images are inside this with fixed width.

Is there solution like:
<img width="100%" height="150" border="0" alt="" src="cdfdewf.gif">

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members