css push footer down

JCWEBHOST
JCWEBHOST used Ask the Experts™
on
hey i need help with my css

i want the contents div to push down when the information is enterd and also the footer div?


i have a main div, header div, contents div, and footer div.

can anybody teach me how to do this?

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		html, body
		{	
			width:100%;
			height:100%;
			margin:0;
			padding:0;
		}
		body div
		{
			width:100%;
		}
		#header
		{
			top:0%;
			height:20%;
			background-color:pink;
		}
		#contents
		{
			top:20%;
			height:60%;
			background-color:lime;
		}
		#footer
		{
			top:80%;
			height:20%;
			background-color:pink;
		}
	</style>
</HEAD>

	<BODY>
		<div id="header">
			this is a header
		</div>
		<div id="contents">
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
			this is a content section<br>
		</div>
		<div id="footer">
			this is a footer
		</div>
	</BODY>
</HTML>

Open in new window

Most of the problems with div elements overlapping each other comes from floating them in the stylesheet (i.e. div {float:left;})

A rough outline for a resizing page could be:



<html>
<head>
  <title>CSS content test</title>
  <style type="text/css">
    body {margin:0px; padding:0px; font-family:Verdana, Arial; font-size:12px; background-color:#C0C0C0;}
	div  {margin:0px; padding:0px;}
	h2	 {margin:0px; padding:0px; font-size:18px;}
	p	 {margin:0px; padding:0px;}
	#main    {width:500px; border:1px solid black;}
    #header  {padding:10px; background-color:#FF8080; border-bottom:1px solid black;}
    #content {padding:10px; background-color:#FFFFFF;}
    #footer  {padding:10px; background-color:#60A0FF; border-top:1px solid black;}
  </style>
</head>

<body>
<div id="main">
  <div id="header">
    <h2>HEADER</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div id="content">
    <h2>CONTENT</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere quam a turpis dictum fringilla.</p><br>
    <p>Nullam sem justo, viverra iaculis eleifend eu, sollicitudin id tellus. Morbi nisl sem, egestas eget vehicula quis, porttitor ac erat.</p>
  </div>
  <div id="footer">
    <h2>FOOTER</h2>
  </div>
</div>
</body>
</html>

Open in new window

Commented:
If you provide a link to your page or some code, we can provide a more concise solution.
Commented:
#footer {
clear:both;
}

Author

Commented:
thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial