Browser messing up sidebars when reducing size

http://rusticblonde.hostizzo.com/

Hi there,

please can someone help. Ive done this on a “float” style with % margins etc…. but when for example i resize the browser the sidebars go all messy…

This is my CSS markup

#MainContent {
width: 53%;
float: left;
margin-left: 110px;
margin-top: -247px;
padding-top: 0px;
background-color: #ffffff;
font-family: verdana;
padding-left: 10px;
padding-right: 10px;
font-weight: 100;
font-size: 8pt;
color: #000000;
}
#rightsidebar {
background-color: #ffffff;
width: 26%;
float: left;
margin-left: 15px;
margin-top: -247px;
}
 #FooterWrapper {
width: 81.2%;
clear:both;
height: 20px;
background-color: #145618;
color: #ffffff;
margin-top: 0px;
margin-left: 110px;
padding-bottom: 10px;
}
 #chunkyfooter {
 clear: both;
overflow: hidden;
width: 81.2%;
padding-top: 8px;
margin-left: 110px;
text-align: center;
font-family: verdana;
font-size: 10px;
}

Any ideas how to fix this?

thanks 🙂

Kirsty