Problem with alignment of footer on website -- LiveWire Tech Forums

796 users online 165842 members 1997 active today Advertise Here

You have 1 new message.

Emergency Help

Until you sign up you can't do much. Yes, it's free.

Sign Up Now
Already have an account?

► Invite Friends

► Active Members

► Groups

► Contests

Moderators
9 online / 34 MPM

Fresh Topics

And I can guide a missile by satellite.
Needed!
Guys wut do u think about getting a girls virginity?
bad reaction?

which would u rather?
I need a song please
guys , are you

going to 7eleven
haha boiled peanuts.
Virginity

Uh oh...

Black or African?
riding the teat bags
ice cream.
Dogs and Chocolate..
Ringtones
Eating this
I seriously feel invisble
Do you cut? (Read OP)

More Fresh Topics

LiveWire / Technical Forums / Web Design & Search Engine Optimization / Viewing Topic

Problem with alignment of footer on website

Replies: 14 — Last Post May 18 2:55am by allsmiles

Single page for this topic

Email Print Favorite

( DefaultTo0 )

How are you gentlemen!!
Patron
Support Leader
Tech Support Leader

Hey there techie people.

On my website, at the very bottom the footer appears to be floating off to the right a bit. Also, when viewed with IE7, it floats a bit up the page from the bottom as well. Anyone care to take a look at it and tell me what's up with it? I can provide the CSS file if need be, or you may be able to tell what is wrong from just the HTML code.

Thanks!

Post edited at 8:33 am on June 20, 2008 by DefaultTo0

-------
My life blog
My tech blog
My Twitter updates

Post from this position was omitted due to content violations

JeremyM

Visionary
Patron

I'd say, make the footer class be absolute and have a margin of 0 on the left and bottom. See if that works.
If it doesn't, try also setting the position to 0 for the left and bottom

Code:
#footer {
background: #000;
border-top: 3px solid #fff;
padding: 0;
margin: 0 auto;
width: 818px;
clear: both;
margin-left: 0px;
margin-bottom: 0px;
position: absolute;
left: 0px;
bottom:0px;
}

Post edited at 10:41 am on May 16, 2008 by JeremyM

-------
smd
LiveWire points are overrated; a currency for artificial respect.
A very funny read

i who have nothing

Executive
Patron

it looks like it's cause the footer is inside another div. so when you set it to 800px it extends to the right and overlaps the other crap. if you set it to 100% instead of 888 or whatever it is then it aligns right but doesn't fill the entire white box. but that might be as good as it's gonna get.

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

( DefaultTo0 )

How are you gentlemen!!
Patron
Support Leader
Tech Support Leader

I tried the two things you suggested with Firebug (awesome add-on, btw, if you don't have it), but alas nothing yet. I shall see if there are any more suggestions, if not I shall call it a day.

Since I am a generous person, there will be points involved for the correct answer, if in fact there is one. If no solution is found, anyone who has tried to help can get points anyway. :)

-------
My life blog
My tech blog
My Twitter updates

i who have nothing

Executive
Patron

well i found the problem

Code:

/* General Start */
body {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
background: #242424 url('images/bg.png') repeat-x;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#bgcontain {
width: 818px;
background: #FFF;
border-left: 10px solid #000;
border-right: 10px solid #000;
margin: 0 auto;
text-align: left;
}
.contain { padding: 0 22px; }

if you change the padding to 0px then it'll allow your footer to lie snug against the background. BAT i don't know how to fix it without fucking up the above text by removing the padding.

Post edited at 11:44 am on May 16, 2008 by i who have nothing

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

i who have nothing

Executive
Patron

nevermind.

in your source, move the very last </div> above the <div id="footer">

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

( DefaultTo0 )

How are you gentlemen!!
Patron
Support Leader
Tech Support Leader

Which </div> tag? The one after the page generated comment? Because that mucks up the whole page.

-------
My life blog
My tech blog
My Twitter updates

i who have nothing

Executive
Patron

the very last one in the page.

move it above the <div id="footer">

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

( DefaultTo0 )

How are you gentlemen!!
Patron
Support Leader
Tech Support Leader

I think I made the change you said, but it doesn't look like anything has changed. :(

Would you be able to post what you changed it to that made it work?

-------
My life blog
My tech blog
My Twitter updates

i who have nothing

Executive
Patron

? it looks perfect now and i checked the source and you did what i said to do.

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

i who have nothing

Executive
Patron

also you take way too long to reply to topics.

also you're welcome.

-------
Want more of me? Check out my BLOG.
Share your mp3's for free HERE.

( DefaultTo0 )

How are you gentlemen!!
Patron
Support Leader
Tech Support Leader

When you replied I was already off to bed. :)

The page must have still been in my cache, so wasn't updating when I refreshed. Thanks very much! In kinda a rush here, but you shall get a reward later.

*ruffles hair*

-------
My life blog
My tech blog
My Twitter updates

JeremyM

Visionary
Patron

My answer was also correct. I just failed to include a z-index value.

Had you just put the z-index to something greater than that of all other divs and then set the margin to 50% and left: to -406...it would have worked also.

-------
smd
LiveWire points are overrated; a currency for artificial respect.
A very funny read

allsmiles

Visionary
Ad Free

ergo it was wrong?

-------
When they leave me, they're all smiles.
When they leave you, they're in tears.

Single page for this topic

Email Print Favorite

Looking for something else?

LiveWire / Technical Forums / Web Design & Search Engine Optimization / Viewing Topic