Browser messing up sidebars when reducing size

http://rusticblonde.hostizzo.com/

Hi there,

Read More

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

Related posts

Leave a Reply

1 comment

  1. Try not to mix two units in the same element, maybe this is the cause of your problems.
    Some people like to mix the two kinds of units, pixel and percentage, but I always try to always use pixels.

    My suggestion, choose the one you are most comfortable with and stick with it and as long as you don’t mix different units in the same element you should be fine.