css problems

I'm making a website for a fellow student at my school and I'm needing some help with the css/html basic layout. I've created this "container" div that basically holds the entire page, but for some reason, the div won't wrap around the whole thing, just the very first part.

Here's the page: http://www.noenemies.com/testzone/site01.html

And the css code: http://pastebin.com/539602

And the HTML code: http://pastebin.com/539603

Any ideas? This has really got me confused.

Add overflow:hidden; to the container class. You've floated elements and when you do that they lose their height property. Overflow (for some unknown reason) fixes this.

I'm gonna have to start charging you soon :)

Thanks!

I need a big book of css and HTML.

oh wow! taht's exactly the same problem i was having as well! thanx loaaads!!!

Amazing.

Wow, me too !!!

Can I suggest a Google for "Visibone" and a purchase of one (or several) of their products. Whilst not, ultimately, making you a CSS or (X)HTML know-it-all, they certainly do help. A lot.

Also, the portal page located at http://www.alvit.de/handbook/ is very handy in times of distress.

Ugh. Now I have another problem. I have three divs that I use for the three bottom columns. They aren't aligning right.

Here's the HTML code:

<div id="bottom">
	<div id="latest">
		<div id="bottom_title">Latest</div>
		<p>
		<ul>
			<li><a href="#">Some Kids Ate My Dirt</a></li>
			<li><a href="#">Special</a></li>
			<li><a href="#">Four Things</a></li>
			<li><a href="#">The War</a></li>
		</ul>
		</p>
		<div id="bottom_title">About</div>
		<p>No Enemies is a place for me, Laeronai, to hold all my stuff. I mainly use it as a <a href="#">blog</a>, to hold all my thoughts so I can have more room in my brain. I also do some programming and web design as well, and those are stored in the <a href="#">projects</a> and <a href="#">portfolio</a> sections. If you'd like some web design to be done for you, check out the <a href="#">web design</a> section.</p>
	</div>
	<div id="interesting">
		<div id="bottom_title">Interesting</div>
		<p>How many fish does it take to screw in a <a href="#">lightbulb</a>? Well, I don't know, because since they are made out of water they explode every time they touch light. So it would take a whole lot of things to make it all work. I don't know how they would do it.</p>
		<div id="bottom_title">Obsessed</div>
		<p>I'm addicted. Not to any type of drug or alchohol, but to <a href="#">Frvade</a>. It's an amazingly hard puzzle built upon the style of <a href="#">not pr0n</a>, and it's surprisingly addictive. You'll never get out once you've started</p>
	</div>
	<div id="project">
		<div id="bottom_title">Project</div>
		<p>Qwn an toah gan  foias fhaui goa shfuia fioa gyuw aois fnaois aufia s fnaiusifua nfioa sqiu foia squw foa nboan2qi aiobuan boa sbuw obuaij fioasusf  fufias tutoa suifi ogitub <code>ifiuagiuhg faushf)_ofaos</code> fsiuf asoiw ghaus qo g aqio ansuro saijwu aodhoiwh= auwi baiwhg ao</p>
		<div class="download">Download v2.3</div>
	</div>
</div>

And the css:

#bottom {
	width:720px;
	background:#f1f1f1;
	color:#666;
	margin-top:10px;
	border-top:5px solid #000;
	border-bottom:5px solid #000;
	border-left:1px dotted #666;
	border-right:1px dotted #666;
	margin-bottom:10px;
	}

#bottom_title {
	width:100%;
	font:14px Georgia, Times New Roman, serif;
	font-weight:bold;
	color:#000;
	border-bottom:1px dashed #666;
	}

#latest {
	width:225px;
	float:left;
	margin:5px;
	position:relative;
	}

#bottom ul {
	list-style:none;
	margin-left:0;
	padding-left:8px;
	}

#bottom li a {
	padding-left:6px;
	}

#bottom li a:hover {
	border-bottom:none;
	color:#678;
	padding-left:3px;
	border-left:3px solid #ccc;
	}

#interesting {
	width:225px;
	margin:5px;
	position:relative;
	float:absolute;
	left:235px;
	}

#project {
	width:225px;
	margin:5px;
	position:relative;
	float:absolute;
	left:480px;
	}

And the effect: http://www.noenemies.com/testzone/site02.html

For some reason, they line up in that "stair" pattern and I'm not sure why. I don't want to use absolute values, because the "bottom" div has to expand when all the others gain more content, and that won't work if it's absolute.

Thanks again.

And the content on the site is all demo content.

you need to float the left column to the left, then the centre and the right one to the right. remove margin and adjust width until they work properly.

You will also need a footer that clears the float (clear:both;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
	<!--
#bottom {
	width:720px;
	background:#f1f1f1;
	color:#666;
	margin-top:10px;
	border-top:5px solid #000;
	border-bottom:5px solid #000;
	border-left:1px dotted #666;
	border-right:1px dotted #666;
	margin-bottom:10px;
	}

#bottom_title {
	width:100%;
	font:14px Georgia, Times New Roman, serif;
	font-weight:bold;
	color:#000;
	border-bottom:1px dashed #666;
	}

#latest {
	width:225px;
	float:left;
	margin:5px;
	position:relative;
	}

#bottom ul {
	list-style:none;
	margin-left:0;
	padding-left:8px;
	}

#bottom li a {
	padding-left:6px;
	}

#bottom li a:hover {
	border-bottom:none;
	color:#678;
	padding-left:3px;
	border-left:3px solid #ccc;
	}

#interesting {
	width:225px;
	margin:5px;
	position:relative;
	float:left;
	}

#project {
	width:225px;
	margin:5px;
	position:relative;
	float:right;
	}
#footer {
	clear:both;
}
	-->
	</style>
</head>

<body>
<div id="bottom">
	<div id="latest">
		<div id="bottom_title">Latest</div>
		<p>
		<ul>
			<li><a href="#">Some Kids Ate My Dirt</a></li>
			<li><a href="#">Special</a></li>
			<li><a href="#">Four Things</a></li>
			<li><a href="#">The War</a></li>
		</ul>
		</p>
		<div id="bottom_title">About</div>
		<p>No Enemies is a place for me, Laeronai, to hold all my stuff. I mainly use it as a <a href="#">blog</a>, to hold all my thoughts so I can have more room in my brain. I also do some programming and web design as well, and those are stored in the <a href="#">projects</a> and <a href="#">portfolio</a> sections. If you'd like some web design to be done for you, check out the <a href="#">web design</a> section.</p>
	</div>
	<div id="interesting">
		<div id="bottom_title">Interesting</div>
		<p>How many fish does it take to screw in a <a href="#">lightbulb</a>? Well, I don't know, because since they are made out of water they explode every time they touch light. So it would take a whole lot of things to make it all work. I don't know how they would do it.</p>
		<div id="bottom_title">Obsessed</div>
		<p>I'm addicted. Not to any type of drug or alchohol, but to <a href="#">Frvade</a>. It's an amazingly hard puzzle built upon the style of <a href="#">not pr0n</a>, and it's surprisingly addictive. You'll never get out once you've started</p>
	</div>
	<div id="project">
		<div id="bottom_title">Project</div>
		<p>Qwn an toah gan  foias fhaui goa shfuia fioa gyuw aois fnaois aufia s fnaiusifua nfioa sqiu foia squw foa nboan2qi aiobuan boa sbuw obuaij fioasusf  fufias tutoa suifi ogitub <code>ifiuagiuhg faushf)_ofaos</code> fsiuf asoiw ghaus qo g aqio ansuro saijwu aodhoiwh= auwi baiwhg ao</p>
		<div class="download">Download v2.3</div>
	</div>
	<div id="footer">
		
	</div>
</div>


</body>
</html>

incidentally, you shouldn't use fixed pixel sizes for fonts since IE will not resize them when the text size is changed.

Thanks, Perturbatio!

Hate to hijack the thread some, but anyone recommend a good site with regards learning how to use CSS for layout? Currently making a web-site myself here for my Web-Design class, and I'm getting really sick & tired of keeping track of my code through tables of nested tables.....not to mention trying to keep the size on the layout correct since the slightest addition seems to stretch something somewhere...

Quite like the setup of your CSS there though Laeronai, the code itself looks so much cleaner & easier to maintain then mine....
(all I know how to use CSS for is pre-defining things like fonts, html tags, and classes which I use for my tables)

css is real easy to use for the most part, but I just get caught on these small problems that have an obvious answer. I'm in the midst of writing a css introduction tutorial for the rerererelease of my website.

If I were you, I'd check out del.icio.us for some tutorials. Or some good places are A List Apart, this W3 Schools tutorial, or this 9rules article. Good luck. Feel free to contact me (in profile) if you have any questions.