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
  • 103 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by teedoff
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.