By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,665 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Absolute Positioning Weirdness

P: n/a
I have a strange problem that I'm hoping someone can help me with.

I want a footer at the bottom of my simple HTML page to span the entire
width of the page. I'm not using floats, columns or any other such complex
things. Here is the ridiculously simple markup I'm using:

<body>
<div id="footer">A Simple Footer Test</div>
</body>

And the style sheet markup that goes with this is:

body {
margin: 0;
padding: 0;
}
#footer {
background: #933;
color: #FFF;
position: absolute;
bottom: 0px;
width: 100%;
}

Here's the problem. This shows up in IE just fine (the footer area spans the
entire document width). In Mozilla 1.5, the browser I use most often, the
DIV appears off the page a little (the horizontal scroll bar shows up, even
though it ideally shouldn't). When I make some changes to the #footer CSS
style, it shows up just fine in Mozilla (no scroll bar and it spans the
entire width) but is broken in IE (the footer does not span the entire
document width). Here is that altered code:

#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}

What is going on here? Mozilla gets the latter code snippet right, and that
seems like the better way of doing it (I'm "pinning", so to speak, the sides
of the DIV to a certain location). But IE breaks on that code. Ironically,
I'll be displaying this HTML in IE all the time (I'm writing an application
using the CHtmlView class in MFC), so the first snippet is fine. I just want
to know if I'm going about this the wrong way and why Mozilla (which seems
to be *way* more standards compliant than IE) gets it "wrong".

Any ideas?

Jonah
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Jonah Bishop wrote:
I want a footer at the bottom of my simple HTML page to span the entire
width of the page. I'm not using floats, columns or any other such complex
things.


Loose the positioning, simply insert the html as the last element on the
page.

--
Spartanicus
Jul 20 '05 #2

P: n/a
Well, I'd like the footer to be at the bottom of the "window" so to speak. I
know fixed positioning would do this, but here is what I'd ideally like:

When the page is too short to require vertical scrolling, the bar should
appear at the bottom of the window. When it does require scrolling, it
should appear at the bottom of the document. Is this even possible?

Jonah

"Spartanicus" <me@privacy.net> wrote in message
news:k5********************************@news.spart anicus.utvinternet.ie...
Jonah Bishop wrote:
I want a footer at the bottom of my simple HTML page to span the entire
width of the page. I'm not using floats, columns or any other such complexthings.


Loose the positioning, simply insert the html as the last element on the
page.

--
Spartanicus

Jul 20 '05 #3

P: n/a
Jonah Bishop wrote:
When the page is too short to require vertical scrolling, the bar should
appear at the bottom of the window.
I doubt that it's possible to do that.
When it does require scrolling, it
should appear at the bottom of the document.


Fraught with problems if you want it to work cross browser afaik.

--
Spartanicus
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.