aligning two divs side-by-side: text is misplaced

[mehgcap]

Hi all,
I am relatively new to css. I have volunteered to help a small organization with their website, and I found what they currently had to be very out of date and not at all modular (for instance, their main nav menu was replicated in every site page, instead of being included from a single file). I am trying to modernize things. I have gotten most of what I want done, except for one major problem. I have a mainMenu div, holding a column of navigation links, which takes up the left 20% of the page. Beside that is my content div, holding the main content of the page. There is a div above both of these holding the logo.

The problem is this: my content div lines up where it should, but the actual text does not start until after the last button in the mainMenu div. This leaves the whole page to the right of the menu completely blank. I have no idea why this is happening, and I have done countless searches on the topic. The website I am working on is at http://www.acbmaine.org/dev (leave off the /dev to see the original site). I have pasted my css below. Any suggestions on how to get the content text to move up to the top of the page, instead of after the menu, would be great. Thanks in advance.

div.mainMenu{ //main navigation menu container
float:left;
width:20%;
}

.mainMenuItemContainer{ //div holding a menu item link
position:relative;
height:100px;
width:300px;
}

a.mainMenuItem{ //a link in the menu; it should be a circle, with the text in the middle
position:absolute;
display:block;
width:100%;
height:100%;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius:50%;
-o-border-radius:50%;
font-size:24px;
line-height:100px;
text-align:center;
color:#00b;
background:#fff;
}

.mainMenuItem:hover{ //turn menu item gray when you hover
background:#aaa;
border:#fff 4px;
}

.content{ //main content container for all pages
float:right;
width:80%;
}

p.style{ //most paragraphs have this styling, so I just put it here
float:left;
margin-left: 0.5in;
margin-top: 6px;
margin-bottom: 6px;
}

div.header{ //div holding the header image and text
align:center;
text-align:center;
margin-top:6px;
margin-bottom:6px;
margin-left:0 auto;
margin-right:0 auto;
overflow:hidden;
}

div.headerContainer{
align:center;
}

div.clear{
clear:both;
}

[simplypixie]

You have a confilct here

div.mainMenu{ //main navigation menu container
float:left;
width:20%;
}

.mainMenuItemContainer{ //div holding a menu item link
position:relative;
height:100px;
width:300px;
}

You are setting the width of the overall menu container to be 20% of the page width which could be anything depending on the screen resolution, but then you are saying to set the width of the actual menu items to 300px - you cannot mix the 2. So firstly you need to change the width of your menu container to match the overall width of what is inside it including the width of the menu item and any padding and/or margin widths you may have set on the left and right.

Once you have changed the menu to be a set width you can then change the main content area to either be a set width in pixels and a margin-left to match the width you have now determined for you menu.

A way to check the overlap is to apply a coloured 1px right border to your div.mainMenu div and a different coloured 1px left border to your .content div and you will then be able to see if and where the 2 are overlapping and causing the shift below of your content.