Member Avatar for chunkmartinez

On my web page i have a footer image that is to go on the bottom of the page, but is also to be centered(like a centered footer on the bottom of a page!!)
I know that if i use the center tag, tahat i cant use the position:absolute style in css to move to bottom. So what can i do??

  • 3 Contributors
  • 11 Replies
  • 90 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by chunkmartinez

Dani AI

Generated

was asking for a centered footer image pinned to the bottom of the page. rightly pushed CSS rather than the old <center> tag and reminded everyone that DOCTYPE affects what is valid. Below are two practical, modern patterns (plus fallbacks) you can apply immediately depending on whether the footer should sit below page content or stay fixed to the viewport.

Flexbox sticky-footer (best for responsive layouts; works with a div if you must keep HTML 4.01 Strict):

HTML

<div class="page">
  <div class="main">...content...</div>
  <div id="footer"><img src="footer.png" alt=""></div>
</div>

CSS

html,body { height: 100%; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }
#footer { display: flex; justify-content: center; align-items: center; }

If you need the footer always visible (sticks to the bottom of the viewport), use a fixed-position approach that centers without relying on text-align (good cross-browser support except very old IE):

#footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

Fallback for ancient browsers that lack transform: give the footer a known width and offset it with a negative left margin equal to half that width.

Troubleshooting tips: ensure the footer isn�t overlapping content by adding bottom padding to the main content equal to the footer height when using fixed positioning; if using absolute positioning, the positioned ancestor matters (set it to position: relative if you want the footer bottom relative to a container). For semantics and future-proofing, consider updating to HTML5 and using the <footer> element when possible — see MDN on flexbox and positioning for details: Flexbox basics and position property.

Recommended Answers

All 11 Replies

Member Avatar for MattEvans

I know that if i use the center tag, tahat i cant use the position:absolute style in css to move to bottom. So what can i do??

why not? it should work o_O if not:

<div style="position:absolute;"><center>i'm in the middle</center></div>

of course. you shouldn't use <center> tags anymore. unless the powers that be have changed their minds again; you should use:

<div style="position:absolute;text-align:center;">i'm in the middle</div>
Member Avatar for tgreer

It isn't a matter of "changing minds". It's simply a matter of which HTML version, meaning schema, indicated by DOCYTPE, you are using.

The "center" tag is perfectly valid, in certain versions of HTML.

The arguments that it SHOULDN'T be used, even where it's legal, are philosophical in nature and should never stand in the way of "getting the job done". The argument, of course, is that "centering" something is purely visual, unrelated to the structure of the document, and that HTML is structural markup. Any markup having to do with presentation, should be done with CSS.

Member Avatar for MattEvans

ah; i understand. when my comments are in that tone, it's purely satirical.

i thought center was outright deprecated in all current versions of HTML? i write in XHTML transitional because I usually generate pages from XML, and I don't care much for SGML anyway. my pages start life with a simple XML structure, and end up with a different (complex) HTML structure. that's why I'm firmly in the belief that a page must be defined by more than it's CSS, and any attempts to move certain aspects of a page into CSS will result in CSS looking more like HTML, and ending up needing it's own style descriptor.

i don't have any problem with "the powers that be" or the guidelines, or even following the guidelines. or conforming to a doctype, or using a doctype. infact, I like the doctypes. quirks mode aint so nice.

but I'll never agree that HTML isn't a means of presenting data. sometimes the structure is the presentation.

Member Avatar for tgreer

You'll find I agree with you. You're right, "center" isn't in some of the newer standards. But with HTML, one standard doesn't necessarily supersede an older standard. You can code any HTML standard you like. As browsers get better, then adhere more closely to the standards. If you declare the proper doctype, then you're mostly ok. If you want to use HTML 3.2 and the "center" tag: go for it.

I too agree that separating structure and content isn't so easy. "Centering" is a good example. Try telling an architect the "central" support beam isn't structural.

Member Avatar for MattEvans

i never let convention or heresay get in the way of what i want to do. if it comes to it, i'll try to force the appearance/flexibility i want by whatever means available.

but, the amount of people (admitadly, they're mostly in other forums) who want to move everything possible into CSS, and the "you must be joking" response to simple flexible solutions involving !tables!, i do feel like i must be in the opinion minority sometimes o_O

Member Avatar for chunkmartinez

:cheesy: Hey thanx Dudes. im not all that up to date with certain standards.
Now this "text-align:center", i hear people use it to center everything now adays, but what i also heard is that it doesnt work on all browsers. I like to make the type of pages were both Fox and IE(dont really care about opera) read them the same(compadibility). :mrgreen:

Member Avatar for MattEvans

text-align:center will work in firefox, and ie. but it might not work in very old versions. you should also pick a document type for your page(s), otherwise the browser(s) will have something of a field day when it comes to how they make things look. if you pick a recent document type, then your page will probably look ok on all browsers* including opera.

http://alistapart.com/stories/doctype/

*that support CSS =P

Member Avatar for tgreer

Agreed. In any discussion about CSS and HTML, the very first question to ask is, "What DOCTYPE are you declaring?".

If there isn't a good answer, or if the coder doesn't know what a "DOCTYPE" is, there is no point in further discussion.

Member Avatar for chunkmartinez

Strict DTD
but i will pretty mutch use whatever works best

Member Avatar for MattEvans

which STRICT? =P strict could be strict X(ML)HTML or strict SGML HTML, it could also be strict x.x where x.x is version/revision number...

If you use a browser like Firefox, it will tell you whether a page is in quirks or standards compliance mode. that can be helpful if you're not sure whether you're referencing a document type correctly.

The W3C also offer a tool that you can use to see just how compliant you are:

http://validator.w3.org/

and an example pass:
http://validator.w3.org/check?uri=http%3A%2F%2Ffusiongroupuk.com%2Ffuse-data%2Findex.xrm
for: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and an example fail:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fusiongroupuk.com%2Fforum%2FYaBB.pl
for: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and an example of an invalid doctype:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fusiongroupuk.com%2Findex.html
for: <!DOCTYPE HTML PUBLIC >

Member Avatar for chunkmartinez

HTML 4.01 Strict

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.