Brand new to css, footer does not push down

I am brand new here so please bare with me. I have designed a few sites a while back using dreamweaver and using the table method. I just do not get this css code yet. It will sink in but I’m hoping somebody can help me here.

The problem is when I create the page I did using the code below then enter text into the page and continue to enter text when I get to the footer area it does not push down automatically so I can keep hitting the enter key if I wish. I don’t know what I’m doing wrong and I’m all researched out. Can someone be kind enough to give me some code that might work for me after they see what I have done below?

This is the site I want eventually:
A thin 10px red line (topline) on the top of the page with no margins that width is 100% so it adjusts no matter what size screen resolution.

A header under that, that is the same width (100%, goes across full screen) and 100px height for my logo. I want to put my 960pxX100px logo in that header and have the logo centered.

A 990px width spry menu which I have there now centered and height adjust automatically to what dreamweaver created.

A 990px width centered content area under all that for all my text, images, content, etc. I want a div within a div though so it creates a nice 15px border around the content area. Grey larger div and a white smaller one for all the content.

Then I want a thin red line (bottomline) again about 7px put again I want this 100% width to go full screen.

Finally a footer that goes 100% width also.

Now for the tricky part. When I add text to my content area I want the red line and the footer area to automatically push itself down when I add content.

I know I’m asking a lot but I can’t figure it out so I figure to give this forum a try. Thanks very much to anybody who wishes to help me.

My code is below and obviously you can tell I’m new to css, sorry. Got to start somewhere. I recently upgraded my dreamweaver to cs5 so that is what I’m using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header {
	position:absolute;
	left:0px;
	top:10px;
	width:100%;
	height:100px;
	z-index:1;
	background-color: #222;
}
#master {
	margin: 0px auto;
	position: relative;
	width: 990px;
	left: 0px;
	top: 0px;
}
body {
	text-align: center;
	background-color: #CCC;
	margin-top: 0px;
	color: #000;
	background-image: url(images/bg.gif);
}
#content {
	position:absolute;
	left:0px;
	top:160px;
	width:990px;
	height:400px;
	z-index:-100;
	background-color: #CCCCCC;
}
#footer {
	position:absolute;
	left:0px;
	top:570px;
	width:100%;
	height:50px;
	z-index:3;
	background-color: #222;
	font: 12px/25px Verdana, Geneva, sans-serif;
	color: #FFF;
	bottom: 0px;
}
a:link {
	color: #FFF;
	text-decoration: underline;
}
a:hover {
	text-decoration: overline;
}
#menu {
	position:absolute;
	left:0px;
	top:110px;
	width:990px;
	height:0px;
	z-index:4;
}
#footer {
	color: #999;
}
#footer p {
	margin:0;
	padding:10px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#topline {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:10px;
	z-index:4;
	background-color: #CC0000;
}
#bottomline {
	position:absolute;
	left:0px;
	top:565px;
	width:100%;
	height:5px;
	z-index:5;
	background-color: #CC0000;
}
#content2 {
	position:absolute;
	left:15px;
	top:15px;
	width:960px;
	height:370px;
	z-index:100;
	background-color: #FFFFFF;
}
</style>
</head>

<body>
<div id="header"> 
  <!-- Header start --> 
  <img src="images/logo.jpg" width="960" height="100" alt="XXXXXXX" /></div>
<!-- Header end -->
<div id="master">
  <div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">HOME</a> </li>
      <li><a href="#">COMPANY INFO</a></li>
      <li><a href="#">TESTIMONIALS</a> </li>
      <li><a href="#">PORTFOLIO</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">FAQS</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="content2">
      <p>u </p>
    </div>
  </div>
</div>
<div id="footer"> 
  <!-- Footer start --> 
  <a href="#">Home</a> | <a href="#">Company Info</a> | <a href="#">Testimonials</a> | <a href="#">Portfolio</a> | <a href="#">Services</a> | <a href="#">Faqs</a> | <a href="#">Support</a> | <a href="#">Contact</a><br />
  XXXXXX.com Copyright &copy; 2010 | All Rights Reserved&nbsp; 
  <!-- Footer end --> 
</div>
<div id="topline"></div>
<div id="bottomline"></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I added min-width like you suggested and it fixed the problem. Thank you very much Stomme poes for that.

And thank you c2uk for your width and border suggestions.

I will now look into the resources you two have suggested for me. I need all the help I can get.

PS. If anybody else has good book or link suggestions for beginners I would appreciate them.

Thanks again, Sammy

Told him that already…

Ah, yeah. I missed that.

Also removed the 100% widths on the header and footer and still looks good in all screen resolutions but when going down to 800X600 on ie and firefox and then you scroll to the right the header and footer do not go all the way to the right of the screen.

Yeah this is pretty common. The solution I can remember now in my somewhat beer-filled state was setting a min-width on the header/footer elements that is wider than the widest the site needs to be before scrolling appears. Would that be more than 960px?

#header, #footer {
min-width: 970px;
}

There was another way too, but I can’t remember it now.

I will second c2uk’s suggestion of a sitepoint book and will suggest Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. The first edition is old enough to be free in your local library if they carry it. The second edition just came out.

Right, I didn’t want to go into the mess of haslayout et al.

Told him that already…

Thank you very much for your replies.

I removed the topline and bottomline and used borders attached to the header and footer as suggested which worked perfectly. Also removed the 100% widths on the header and footer and still looks good in all screen resolutions but when going down to 800X600 on ie and firefox and then you scroll to the right the header and footer do not go all the way to the right of the screen.

Thanks for your help.

Okay, I re-did everything again. Since I’m brand new to this I was wondering if an expert could tell me what’s wrong with my code before I continue anymore. I seem to have gotten it working the way I want except one thing. When you re-size your browser window to 800X600 and scroll all the way to the right you will notice that the top and bottom areas that I have designated to be 100% width do not actually go all the way to the right. Other than that just wondering what minor code problems there might be as this is my simple template(layout) I want to use and I’m a beginner and would like to start off on the right foot.

Thanks for any help in this matter, Sammy

Code below. I have now separated the css in it’s own file.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="topline" id="topline"></div><!--end .topline-->
<div class="header" id="header"><img src="images/logo.jpg" width="960" height="100" alt="XXXXXXXX" /></div><!--end .header-->
<div class="container" id="container">
  <div class="menu" id="menu">Content for  class "menu" Goes Here</div><!--end .menu-->
<div class="content" id="content">
    <p>Content for  class "content" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div><!--end .content-->
</div><!--end .container-->
<div class="bottomline" id="bottomline"></div><!--end .bottomline-->
<div class="footer" id="footer">
  <p>Content for  class "footer" Goes Here</p>
  <p>&nbsp;</p>
</div><!--end .footer-->
</body>
</html>

@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	background: #CCC;
	text-align: center;
}
#topline {
	background: #CC0000;
	height: 10px;
	width: 100%;
}
#header {
	background: #222;
	width: 100%;
	height: 100px;
	text-align: center;
}
#container {
	background: #999;
	width: 960px;
	margin: 0px auto;
	padding: 10px;
}
#container #content {
	background: #FFF;
	margin: 10px;
}
#bottomline {
	background: #CC0000;
	width: 100%;
	height: 5px;
}
#footer {
	background: #222;
	width: 100%;
}

simply don’t apply a width to those elements. Block elements naturally take up all the space there is, no need for a width:100%

there are also other questions as to your use of topline and bottomline. As they look at the moment, they could easily be replaced with a border applied to the respective following div.

I’d strongly suggest buying a decent book like one of Sitepoint’s. or head over to htmldog and check out their tutorials, and don’t forget to use Sitepoint’s reference.

That much absolute positioning is not needed at all. In my opinion, and I’m sure 90% of others here, I’d scrap that and redo the CSS to use floats/margins for postiioning

Block elements naturally take up all the space there is, no need for a width:100%

Except if you need Haslayout for IE. For those who see 100% width on static divs in other codes floating around out there.

BTW Sammybotz, when you post code, use [code] tags around your code. Makes it a bit more readable.

how come that you’re the second person in almost as many days that uses a combination of position:absolute and position:relative for your layouts? is there a popular tutorial somewhere that teaches this method?

and for future references, could you please enclose your code in [ html ] tags? makes it easier to read, thanks.

P.S. I leave an answer to the CSS gurus of this forum.