Member Avatar for samsons17

Hi, i've tried to design a page here,but why my float:bottom does not working, instead the text within the container still appear on the top of the page.

Before this,i always using margin to drag the desired tags down to the bottom,or left,right etc,but i guess it is not the efficient way.

So,could somebody tells me why it is not working here?

This is the html page:

<html>
<head>
	<title>Welcome To SmartForum</title>
	<link href="main.css" rel="stylesheet"  type="text/css"> 
</head>
	<body>
		<div id="header">
			<div id="headerlogo">
				SmartForum
			</div>
			<div>
		<div id="footer">
			Sharing Problems, Organize Your Lifes
		</div>
		</body>
</html>


CSS file :

body {
	background-image:url(bg.jpg);
	background-repeat:repeat-x;
	margin: 0;
    padding: 0;
    overflow-x:hidden;
}

#header{
	height:90px;
	background-image:url(topbarbg.GIF);
	background-repeat:repeat-x;
}

#headerlogo{
	font-family:arial;
    font-size:35px;
    color:white;
    position:absolute;
    margin:20px 0 0 150px; 
}

#footer{
	float:bottom;
}

This is the screenshot of the index.html on the web:

smartforum.jpg 26.32 KB
  • 3 Contributors
  • 3 Replies
  • 115 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Building on the quick hints from and , here are modern, practical ways to keep a footer at the bottom and some diagnostic checks to find layout problems quickly. The examples below show two reliable patterns (a "sticky" footer that stays at the bottom when page content is short, and a viewport-anchored footer), plus a short checklist to debug unexpected behavior.

/* sticky footer using Flexbox */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }    /* main consumes available space */
footer { flex-shrink: 0; padding: 1rem; background: #222; color: #fff; }
/* viewport-anchored footer (fixed) */
footer.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;            /* known footer height */
  z-index: 999;
}
main { padding-bottom: 56px; } /* reserve space so content isn't covered */

Quick checklist when the footer still misbehaves:

  • Inspect the footer's computed position, top/bottom and its containing block in DevTools; transformed/positioned ancestors change containment.
  • Confirm parent heights are set when using 100vh/min-height patterns (missing parent height can break column layouts).
  • Watch for overlapping elements (fixed elements overlay content unless space is reserved).
  • Run an HTML validator to catch mismatched tags or structural issues that affect flow.
  • Prefer semantic structure (header, main, footer) so layout intent is clear.

For modern projects, Flexbox (or CSS Grid) is the simplest, most robust solution. Use the fixed approach only when the footer must always be visible, and remember to account for mobile viewport quirks (reserve space or use safe-area insets where needed).

Recommended Answers

All 3 Replies

Member Avatar for codewall

try..

#footer{
	position:relative;
	top:60px;
}

SNIP

Edited by happygeek because: fake sig snipped
Member Avatar for teedoff

There is no such thing as float: bottom.

float:left;
and
float:right;

You also have an opening <div> tag right above your footer, but no closing div tag.

Then you should include a complete valid doctype. I suggest using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

And you have positioned your header logo absolutely. That will pose problems for you. Try viewing your page in your browser, then resize it and see what happens to your logo. You can float that logo left, then use margins to position it where you want.

Edited by teedoff because: n/a
Member Avatar for teedoff

This will work for your headerLogo and footer divs:

#headerlogo {
	font-family:arial;
	font-size:35px;
	color:white;
	float:left;
	margin:20px 0 0 150px;
}
#footer {
	clear:both;
}

Remeber to remove that extra <div> tag as well as add the doctype I suggested.

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.