asked on

How to get footer on bottom?

In the code snippet, how do I get the footer on the bottom of the page and centered?

Also, how do I get everything to stay in the middle of the page, except the footer, which will expand all the way across?

<html>
<head></head>
<body>
<div>top div here</div>

<div style="float:left;text-align:center;width:200;height:200px;border:1px solid black;padding:10px;margin:10px;">box 1</div>
<div style="float:left;text-align:center;width:200;height:200px;border:1px solid black;padding:10px;margin:10px;">box 2</div>
<div style="float:left;text-align:center;width:200;height:200px;border:1px solid black;padding:10px;margin:10px;">box 3</div>



	<div id="footer" style="position:relative;">
		a footer here
	</div>
</body>
</html>

Open in new window

Pratima

<html>
	<head>
	</head>
	<body>
		<table height="100%" border="1" width="100%">
			<tr>
				<td align="center">
					<div>top div here</div>
				</td>
			</tr>
			<tr>
				<td align="center">
					<table border="1">
						<tr>
							<td><div style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:10px;BORDER-TOP:black 1px solid;PADDING-LEFT:10px;FLOAT:left;PADDING-BOTTOM:10px;MARGIN:10px;BORDER-LEFT:black 1px solid;WIDTH:200px;PADDING-TOP:10px;BORDER-BOTTOM:black 1px solid;HEIGHT:200px;TEXT-ALIGN:center">box 
									1</div>
							</td>
							<td><div style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:10px;BORDER-TOP:black 1px solid;PADDING-LEFT:10px;FLOAT:left;PADDING-BOTTOM:10px;MARGIN:10px;BORDER-LEFT:black 1px solid;WIDTH:200px;PADDING-TOP:10px;BORDER-BOTTOM:black 1px solid;HEIGHT:200px;TEXT-ALIGN:center">box 
									2</div>
							</td>
							<td><div style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:10px;BORDER-TOP:black 1px solid;PADDING-LEFT:10px;FLOAT:left;PADDING-BOTTOM:10px;MARGIN:10px;BORDER-LEFT:black 1px solid;WIDTH:200px;PADDING-TOP:10px;BORDER-BOTTOM:black 1px solid;HEIGHT:200px;TEXT-ALIGN:center">box 
									3</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<div id="footer" style="POSITION:relative">
						a footer here
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Open in new window

brettr

ASKER

Thanks but I'm not interested in tables.

brettr

ASKER

I think the code below might be all I need for the footer part at least.

<div id="footer" style="clear:both;">

Open in new window

ASKER CERTIFIED SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial