div tags stacking problem

[bleach20xx]

So...I've been building web sites using both tables and CSS for awhile now...I'm trying to make the switch over to using only CSS and div floats instead of using tables, but I'm running into an issue that I, nor anyone that I've talked to thus far, can get our heads around.

 

The problem I'm running into is that I have a horizontally expandable site and it lays out fine, unless a user's browser window is not the correct size.  If it is too small, the div tags start stacking underneath each other.  Is there a way to stop this from happening?  I've seen plenty of other web sites out there that seem to be doing the same thing as me (well, obviously not since their sites don't get messed up) but I just can't seem to figure out what I'm doing wrong.

 

Here's the site.  Resize your browser window and you'll see my problem...

 

http://hypboard.com/cssissue/index.html

 

 

This is the CSS

body {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto;
color: #560001;
background: #660000;
}

.maincontent{
background: #ffffff;
width: 100%;
}

div#banner{
margin-top: 10px;
}

div#footer{
background: #660000;
color: white;
border-top: 2px solid #330000;
padding: 0px 10px;
margin: 0px;
}

.flashside{
vertical-align: bottom;
margin: 0px;
}

#midfloat{
float: left;
}

#navfloat{
float: right;
width: 173px;
}

.endfloat{
clear: both;
}

[jcombs_31]

You have a lot of problems with the way you are developing.

 

I would advise to start with some basic css layout tutorials

 

http://www.alistapart.com/articles/holygrail

[bleach20xx]

I appreciate that link.  Following that example I was able to figure out, by tweaking a bit of the code, what I was doing wrong and fixed the problem.

 

Thanks