middle column pushing right and left down

[shopfor2]

Ok, now my center column is pushing the right and left down as I add content??

 

If someone could please look at and tell me what I am doing wrong?

Thanks again, I appreciate all the help!!

 

 

 

www.portcharlesharbor.com/practicecss.html

my css:

 

 

/* CSS Document */

 

body {

 

background-color:#CCCCCC;

text-align:center;

margin: 0;

padding: 0;

}

 

 

#wrapper {

width:1010px;

margin:0 auto;

padding:10px;

}

 

 

#top {

width:1010px;

height:212px;

z-index:1;

}

 

 

#menu {

width:1010px;

height:53px;

 

}

 

#bodybase {

 

 

width:1010px;

height:633px;

 

}

 

 

#leftcontent{

float: left;

width: 190px;

 

 

}

 

#rightcontent{

float: right;

width: 190px;

 

}

 

#maincontent{

margin-right: 190px;

margin-left: 190px;

width: 610px;

 

}

 

 

#footer {

 

float-left;

width:1010px;

height:46px;

z-index:1;

}

 

 

 

.style8 {

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: bold;

font-size: 14px;

color: #FFFFFF;

line-height:50px;

}

.style9 {

color: #FFFFFF;

font-family: Georgia, "Times New Roman", Times, serif;

line-height:35px;

 

}

a:link {

color: #FFFFFF;

font-weight: bold;

font-family: Georgia, "Times New Roman", Times, serif;

text-decoration: none;

}

a:visited {

color: #FFFFFF;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: bold;

text-decoration: none;

}

a:hover {

color: #FFFFFF;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: bold;

text-decoration: none;

}

a:active {

color: #FFFFFF;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: bold;

text-decoration: none;

}

[BeeDev]

/* CSS Document */

body {

   background-color:#CCCCCC;
   text-align:center;   
   margin: 0;
   padding: 0;
}   


#wrapper {
   width:1010px;
   margin:0 auto;
   padding:10px;
}   


#top {
   width:1010px;
   height:212px;
   z-index:1;
}   


#menu {
   width:1010px;
   height:53px;

}   

#bodybase {


   width:1010px;
   height:633px;

}


#leftcontent{
float: left;
width: 190px;

}

#rightcontent{
float: left;
width: 190px;

}

#maincontent{
width: 610px;
float:left
}


#footer {

   float-left;
   width:1010px;
   height:46px;
   z-index:1;
}


   .style8 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   font-size: 14px;
   color: #FFFFFF;
   line-height:50px;
}   
.style9 {
   color: #FFFFFF;
   font-family: Georgia, "Times New Roman", Times, serif;
   line-height:35px;

}   
a:link {
   color: #FFFFFF;
   font-weight: bold;
   font-family: Georgia, "Times New Roman", Times, serif;
   text-decoration: none;
}
a:visited {
   color: #FFFFFF;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   text-decoration: none;
}
a:hover {
   color: #FFFFFF;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   text-decoration: none;
}
a:active {
   color: #FFFFFF;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   text-decoration: none;
}

 

Try the above CSS but you need to put your divs in the following order in the HTML:

 

Edited March 17, 2010 by BeeDev