Hello, I am new here, so please excuse my naivety... I have searched online for the better part of 3 days now to try to figure out what I am doing wrong, and I can't figure it out. Hopefully someone can help.
I am new to CSS and I am using Dreamweaver. I am trying to set up what I think is a simple page layout. I want the footer to be on the bottom, and the text to fill the main area on the page.

Here is a link to what I am getting:
http://www.superbilliardsexpo.com/testBadCSS.html

The top starts off good, but the bottom falls apart. The container is not supposed to be bright teal colored, I just did that so I can see where it is "ending", which I do not understand because it is set to 100% height, with a minumim of 1200px - for smaller pages and testing purposes really... Eventually, the container will have no fill color so that the bdy BG properties will show through.

Here is the CSS from the style sheet I am using - I took the top part from a site I saw explaining how to make 100% height pages:

Any help is super appreciated!! If anyone is a poolplayer out there, you may recognize the site and or names, I can get you an autograph for some help, it's my dad

Thanks again!

@charset "UTF-8";
html, body, #container {
	min-height: 100%;
	width: 100%;
	height: 100%;
}

/*
 * The "height" above is a hack for IE5+/Win.  Below we adjust
 * it using the child selector to hide from IE5+/Win
 */

html>body, html>body #container {
	height: auto;
}

body {
	background-image: url(images/bgpattern30.jpg);
	margin: 0px;
	padding: 0px;
}
#container {
	position:relative;
	width:100%;
	z-index:1;
	height: 100%;
	min-height:1200px;
	background-color: #0FC;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#header {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:200px;
	z-index:2;
	background-color: #798551;
	background-image: url(images/head.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#Main {
	position:relative;
	top:260px;
	width:800px;
	height:100%;
	min-height:900px;
	z-index:10;
	background-color: #e5e1d9;
	margin-right: auto;
	margin-left: auto;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-width: medium;
	border-left-width: medium;
	border-left-color: #3365a2;
	border-right-color: #3365a2;
	overflow: visible;
}
#footer {
	position:relative;
	width:100%;
	height:74px;
	z-index:40;
	background-color: #74804d;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}
#MenuBar {
	position:absolute;
	left:0px;
	top:200px;
	width:100%;
	height:35px;
	z-index:15;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	text-align: center;
}
#facebook {
	position:absolute;
	width:200px;
	height:699px;
	z-index:13;
	background-color: #FFF;
	right: 3px;
	top: 94px;
}
#BannerAd {
	position:relative;
	top:0px;
	width:600px;
	height:90px;
	z-index:2;
	background-color: #999;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	left: 200px;
}
#MainContent {
	position:absolute;
	left:17px;
	top:155px;
	width:570px;
	height:774px;
	z-index:23;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
#contact {
	position:absolute;
	left:0px;
	top:0px;
	width:200px;
	height:90px;
	z-index:20;
	background-color: #036;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FF0;
	padding: 0px;
}
#SubMenu {
	position:absolute;
	left:0px;
	top:235px;
	width:100%;
	height:25px;
	z-index:41;
	background-image: url(images/SubMenuBar.gif);
	background-repeat: repeat;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
}
#sponsors {
	position:absolute;
	width:582px;
	height:52px;
	z-index:22;
	left: 8px;
	top: 95px;
}

Just thought of some more... I want to set up the page so that I can type text in the main area there, called "MainContent".. Some pages will have more text than others, isnt there a way to set it up so the area just "grows" as I type in it, like what occurs when you type in a table cell? I dont want to overflow:scroll, I just want the pages to get longer, using browser scroll bar... Not sure if this makes sense.

Basically, I just want to have a general area designated for writing in, I dont want everything set by predetermined box sizes. I thought height:100% would take care of this, but that doesnt seem to be doing it... I don't know how to explain this well, but I think looking at my sample page you will understand my intent.

Thanks agian for any help - I assume I am doing something drastically wrong, right from the beginning, but I don't know what...

Dreamweavers preview has always been flakey

Test your sites/pages in real web browsers is the proper way to do it

I did, they looked just as bad... I uploaded the page so people can see what I am getting. Thats the problem, I don't know why they are coming out like that in dreamweaver and I'm hoping someone can suggest what I am doing wrong.
Thanks.

Absolute positioning!


Just get rid of it completely!

OK, Thanks... I admit I am new to CSS... I was under the impression that I set the container to Relative, and then position certain things so they are absolute to the container... I guess that isn't right?
And also, does that explain why my container is not expanding 100% height, as I have it designated? Seems like those 2 things are unrelated...

Im gonna go rework it now, but some advice would be appreciated...

Thanks!

You simply do NOT need all that positioning of ANY kind. Use the document flow rather than fighting it.

To make elements have 100% height they have to have something to be 100% the height of. If the parent container does not have a defined height the results will be indeterminate.

OK, I'm beginning to understand that...

However, in my sample page that I linked to, the body attribute is set to 100%, and the container, which is nested inside the body, is also set to 100%, and yet it does not fill the entire space... This is what confuses me. Do I have something set-up wrong?

Thanks again

The body element will only extend to the length of IT'S parent container!


I don't really get this need for pages that fill the viewport but we do have a Stickied thread on the topic.

Isn't the body's parents container the browser window? So the body should fill the whole window, and then the container should fill that...

It isn't so much that I have a need to do this, I'm just trying to learn how this works. It doesn't make any sense to me why the container won't fill the page if both it and the body tag are set to 100% each.

The problem stems from all that positioning - get rid of it. The only thing that I can see you should have any positioning on is the position:relative on your main container div - that's it.

This is why I do NOT recommend using DW for newbies - DW writes crap code and you're really not learning what you should.

OK, I get that part. What I don't understand then is how do I get elements to line up properly... for example, I want the white "facebook" box to stay aligned to to right edge of the Main content area... without using positioning (which I thought was the whole benefit of DW and CSS) how do I make it stay over there?

I am trying to learn, and get away from traditional HTML Tables for layout purposes, but I am having a hard time with it.

I apologize if I did something wrong, but I do not seem to be getting helpful answers, rather just blasting tell me what I did wrong. I get it, it's wrong... anyone have any tips on how to fix it, at least get me in the right direction.

Thanks

OK, I have tried reworking the page from scratch without using positioning... I used some code to start that someone suggested...
Problem is, I cant figure out how to make elements appear where I want them - specifically the blue box for example... I want it to be on the right, aligned with the right edge of the Content area...
Can someone look at the code and see what I am doing wrong, because I am very lost.

Here is a link to the newly coded page:
http://www.superbilliardsexpo.com/testBadCSS2.html


Thanks so much.. here is the code for the style sheet:

@charset "UTF-8";
* {
   margin: 0
   padding: 0
}
body {
	margin: 0px;
	padding: 0px;
	height:100%; 
	background-color: #1e1e1e;
	background-image: url(images/bgpattern30.jpg);
}
#container {
	background: #fff;
	width: 90%; /* This is to center the container and everything within it */
	height:100%; 
	border: 1px solid #000;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#header {
	width: 100%;
	height: 200px;
	background-image: url(images/head.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #788550;
}
#navbar {
	width: 100%;
	height: 35px;
	background-color: orange;
	background-image: url(images/MenuBarBG.jpg);
	background-repeat: repeat;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #FFF;
	border-bottom-color: #CCC;
}
#content {
	background-color: #CCC;
	height:800px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#footer {
	width: 100%;
	height: 100px;
	text-align: center;
	background-color: #505D32;
}
#Constant {
	left:0px;
	top:250px;
	width:200px;
	height:100px;
	z-index:10;
	background-color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FC0;
	text-align: center;
	vertical-align: top;
}
#NavBar2 {
	width:100%;
	height:25px;
	z-index:1;
	background-image: url(images/SubMenuBar.gif);
}
#banner {
	width:100%;
	height:100px;
	z-index:1;
	background-color: #999;
}
#TextArea {
	width:580px;
	height:600px;
	z-index:30;
	background-color: #999;
	margin: 0px;
	padding: 0px;
}
#Facebook {
	width:180px;
	height:600px;
	z-index:1;
	background-color: #00F;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	padding: 10px;
}

The answer is "float it"

Exactly, set it to float: right; and you're going to have to move the div OUTSIDE of the "textarea" div, otherwise it will wind on on the right side of 'textarea' and not where you want it.

I suggest you read thru this: http://css.maxdesign.com.au/floatutorial/

I tried to recast page from scratch, without using the position . I used a code to begin, someone suggested . The problem is that I can not understand how to show the items where I want them especially the blue box for example .I want to do well, in line with the right edge of the content area.

Hello everybody! I am Scott from NY. I am very happy to join this forum







-----------------------
NFLjersey on sale
----------------------
Nike on sale
------------------------
wholesale Handbags
--------------------------
Bags and Jewelry on sale

The head graphic is too big to fit on 1024px browser screen.

The "OPEN TO PUBLIC" gets cut.

That's not very professional, the design itself is not very attractive or professional. Dreamweaver is not really a professional tool to build professional websites.

See attachment