CSS / Overlap issues - css

Question

I am not very good at this I know some but I am having some issues with my CSS I can not figure out.
My mainContent ID overlaps with under my Sidebar ID. I am sure I messed up my css trying to fix this but I have no idea how to fix t his. I have changed things so many times I have become lost.
Any help would be nice.
#charset "utf-8";
body {
background: #A00;
margin: 0;
text-align: center;
color: #A00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
float: right;
}
.twoColHybLtHdr #header {
background-image:url(img/background3.png);
padding: 12px;
background-repeat: repeat-x;
background-position: left;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 14em;
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
}
.twoColHybLtHdr #footer {
padding: 50px 8px;
background:#FFFF99;
background-color: #FF9;
}
.twoColHybLtHdr #footer p {
font:Georgia, "Times New Roman", Times, serif, 10px;
margin: 0;
padding: 10px 0;
border-color: #666666;
}
.fltrt {
float: right;
margin-left: 10px;
}
.fltlft {
float: left;
margin-right: 10px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #table {
font:
margin: 0;
padding: 10px;
color: #FFF;
y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}

Answer 1

Make sure you specify a width on BOTH the .fltrt and .fltlft columns
Your css should look like this:
/** Assuming the parent element (container) is 940px wide **/
.fltlft {
float: left;
width: 540px;
}
.fltrt {
float: right;
width: 380px;
}
Also, make sure you replace/remove **y** with .y and remove that unused **font** attribute.

Answer 2

Not sure what's happening as there isn't a visual on whats actually happening.
.twoColHybLtHdr #sidebar1 h3, {
Just remove the , and all should be good
The bottom there is a few errors.
.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;
**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
I'm guessing it should be more like
.twoColHybLtHdr #table {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 10px;
color: #FFF;
.y{
background-color: #8B0000;
background-color: #A00;
border: #A00;
}

Answer 3

Take the float right off of the container
put a float left on the main content
add a div after the main content that clears both.
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px; ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
}
*********** add another div after your mainContent and assign it the ID="clear"
.twoColHybLtHdr #clear {
clear: left;
}
There are some other errors in your css but I think these are the ones where you are having your problems.