0

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:

Attachments smartforum.jpg 26.32 KB
3
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by teedoff
0

try..

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

SNIP

Edited by happygeek: fake sig snipped

0

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: n/a

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.