Problem with basic CSS div layout in wordpress: Why are these divs doing this?

I'm mostly a beginner with CSS.

I started off with a bare bones wordpress theme, and after reading a tutorial on div layout here:

http://www.yourhtmlsource.com/stylesheets/csslayout.html

which talked about how div elements are positioned relative to their parent element -- unless they are absolute positioned, and other basics.... I thought I had the basics of layout down. Seemed like a simple enough concept...

I didnt realize that the div cells were overlapping & werent positioned like I thought until I added a test border to the "container div". A couple other times (in other wordpress blogs) , all the div elements have been laid out nicely, and then I would change one little thing, like a small padding or width change.... refresh the webpage...and suddenly 3, 4, or 5 div elements are shuffled, overlapping, etc.

And I never used absolute positioning in any of these sites, and trying to figure out what causes half the page to shuffle & overlap by changing a single parameter for a single div element causes such a big change in div elements that dont even seem to be related.

Any pointers to help me understand this better would be MOST appreciated

• Any explanation telling how to achieve a nice simple layout like in this image. http://img101.imageshack.us/img101/8938/simpleh.jpg
  
• Pointers as to what is making the divs be aligned the way they are. I.e. Why are half of the divs outside the #container div?
  
• Links to any good tutorials that not only teach layout, but have applied examples... that will help me learn to look at a screwed up layout, and figure out why it is messed up.

********

Here is the site:

http://bozemancomputers.com/

You can check the source code -- pretty simple div layout with not much going on -- or so it seemed. Naturally, I expected the "container" div to well contain everything else, and the main div to actually have the #mainleft and #main right inside of it....

container going around the outside, header at the top, navbar menu below that,

In case it helps, I put borders around the div elements, so you can see better

Black dots = #container div
green border = #mainright div
red border = #mainleft div.

the border of #maindiv isnt showing, but Firebug plugin for firefox shows it "superimposed" over the top half of the navbar menu, and sticking out a small bit above the nav menu.


Here is the CSS:

body{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px; 
	margin-top:0px; 
	margin-bottom:0px;
	}

#container{
	width:880px; 
	margin: 0px auto;
border-style:dotted;
border-width:2px; 
	}

#bloginfo{
	text-align:center; 
	background-color: #9E3434; 
	color:#FFFFFF; 
	font-size: 18px; 
	font-family:Geneva, Arial, Helvetica, sans-serif; 
	font-style:italic;
	border-bottom: #FFFFFF solid 2px;
	}

#title {
        background-image:url('/wp-content/themes/bare-bones-10/images/complogotemp.jpg');
        background-repeat:no-repeat;
	margin-bottom: 3px;
height: 300px
      
	}
		
#header h1 a{
	color:#FFFFFF; 
	text-decoration:none;
	text-align:left;
	padding-left: 5px;
	}
	
#sitelocation{ 
	font-size:14px; 
	text-align:center; 
	color:#999999; 
	float:right; 
	width:150px; 
	}
	
#header{
        width: 100%;
	padding-bottom:2px;

	}
	
#menu{
padding-right: 2px;

	}
	

	}
	
#menu a:hover{
	}

/************************************************
*	Main Body									*
************************************************/
	
#main{
        width: 100%;
	margin-top:25px; 


	}

/************************************************
*	Main Body - Left Side						*
************************************************/
	
#mainleft{ 
       width: 65%;
       float:left;

#mainleft ul{
	margin:0px; 
	}
	
#mainleft li{
	margin:0px; 
	margin-bottom:5px;
	}

#content{
	padding-right:10px;
	}




.storycontent {
	line-height:18px;
	}

.entryfooter{
	border-top:1px solid #CCCCCC; 
	margin-bottom:20px;
	}

.entry img{
	float:left; 
	padding:5px;
	}
	
.entry a{
	color:#9E3434; 
	text-decoration:none;
	}
	
.entry a:hover{
	text-decoration:underline;
	}
	
.entry h1 { 
	font-size:24px; 
	font-weight:normal;
	}
	
.entry h1 a{
	color:#000000;
	}
	
.entry h1 a:hover{
	color:#9E3434; 
	text-decoration:none;
	}
	
.entry blockquote{
	border-left: 2px solid #666666; 
	padding-left:3px;
	}
	
.entry blockquote blockquote{
	border-left: 2px solid #9E3434; 
	padding-left:3px;

/************************************************
*	Main Body - Right Side						*
************************************************/
	
#mainright{
	width:25%; 
	float:right;
        padding: 5px
	}

#mainright a{
	color:#333333;
	}
	
#mainright h2{
	font-weight:normal; 
	margin:0px;
	}
	
#mainright ul{
	margin:0px; 
	margin-bottom:5px; 
	list-style-type:none; 
	padding:3px;
	}
	
#mainright li{ 
	border-bottom: 1px solid #CCCCCC; 
	padding:2px;
	}
	
#mainright li:hover{
	background-color:#e6e6e6;
	}
	
#mainright li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
	}


/************************************************
*	Footer										*
************************************************/

#footer{
float:left;
	width:100%; 
	text-align:center; 
	background-color: #cccccc; 
	color:#FFFFFF; 
	font-size: 12px; 
	font-family:Geneva, Arial, Helvetica, sans-serif; 
	margin-top:10px; 
	padding:5px;
	}

Code (markup):

 

You have to remember that when you put nothing but floated elements inside a div, you're div will collapse. Floating an element takes it out of normal flow and will no longer hold the dimensions of the containing div in check.
One common way to prevent your div from collapsing is to intentionally add an element that is not floated.

Try this:
Just after the closing div tag for your right sidebar, I believe you've labeled it #mainright, add the following:

<br class="clearIt" />

Code (markup):

And then in your CSS add:

.clearIt{
clear: both;
}

Code (markup):

Then you can apply this class anywhere you need to clear floated elements.

 

Try look up here: http://phpforms.net/tutorial/tutorial.html . You will try information about html/css here.