I am using the <div> tab in my css to separate the header, footer, left, body, and right side of my page. My problem is when I shrink the browser my objects go all over the place. For example I made some tabs that I placed in the main section and they blend in with the color of my masthead. When I shrink the browser the tabs move around. How can I fix this?

CSS

#masthead {
width:100%;
height: auto;
background-color : blue;
margin-bottom : 0px;
margin-top : 0px;
margin-left: 0px;
margin-right: 0px;
border-bottom: thin solid blue;

}
#leftside {
float: left;
width: 140px;
height: 100%;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;
border-right : thin solid Gray;
background : Silver repeat-y;

}

#Main {
float: none;
width: 100%;
height: auto;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;
background : repeat-y;

}

#rightside {
width: 140px;
height: 100%;
float: right;
background : #66cc33;
border-left : thin solid #00cc33;
margin-left : 0px;
margin-top : 0px;
margin-bottom : 0px;
margin-right : 0px;

}

#footer {
width: 100%;
clear: both;
height: 25px;
border-top : thin solid Gray;

}

HTML Page

<html>
<link rel="stylesheet" type="text/css" href="template2.css" />
<head>
<title>Untitled</title>
</head>

<body style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0;" >

<div id="masthead">
<img src="banner.gif" width="382" height="75" border="0" alt="">
</div>

<div id="leftside">
</div>

<div id="rightside">
</div>

<div id="Main">
</div>

<div id="footer">
</div>


</body>
</html>