homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to set Footer in the center in correct way?

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4355952 posted 10:24 pm on Aug 27, 2011 (gmt 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">



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4355952 posted 10:39 pm on Aug 27, 2011 (gmt 0)

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 ::


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4355952 posted 11:16 pm on Aug 27, 2011 (gmt 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...


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

Msg#: 4355952 posted 4:04 pm on Aug 29, 2011 (gmt 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]


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4355952 posted 7:59 am on Aug 30, 2011 (gmt 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">

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved