Css fixé des élément

Bonjour,
j'ai un problèmes avec ma page, lorsque je réduit la taille de la page, la boite "bandebleu" passe au dessus des autres.
je voudrais s'avoir s'il était possible de contrôler l'affichage des scrollbar, par exemple a partir d'une certaine résolution.

voici mon code css:

/* TITRE */
#titre
{
background-color: #99ccff;
padding: 30px 20px 5px 30px;
LETTER-SPACING: 2px;
}
#title
{
font-size: 130%;
color: #003399;
font-weight: bold;
}
#subtitle
{
font-size: 90%;
color: red;
}




/* MENU */
#menu
{
padding: 10px 10px 10px 30px;
background-color: #003399;
font-size: 80%;
}
A
{
color:#FFFFFF;
text-decoration:none;
}
A:hover
{
color:#FF0000;
text-decoration:underline;
}




/* CORP */
#corp
{
position:absolute;
top: 110px;
left: 275px;
padding: 40px 40px 40px 40px;
background-color: white;
}




/* LOGO */
#logo
{
position:absolute;
top: 110px;
background-color: white;
padding: 10px 10px 100px 10px;
font-size: 83%;
color: red;
text-align: center;
}



/* Bande Bleu */
#bandebleu
{
position:fixed;
bottom: 10px;
background-color: #003399;
padding-top: 20px;
padding-bottom: 20px;
width: 99%;
font-size: 65%;
LETTER-SPACING: 2px;
}
#colorblack
{
color: #000000;
}

le code html qui va avec

<div id="titre">
<span id="title">CHARGE AIRCO GED. SERVICES</span>
<span id="subtitle"> | Depuis plus de 10ans </span>
</div>
<div id="menu">
<a href="blabla.php?page=1"> ACCUEIL </a>   
<a href="blabla.php?page=2">CONTACTEZ-MOI</a>   
<a href="blabla.php?page=3">PHOTO</a>   
</div>
<div id="logo">
<img src="images/fix/logo.jpg" ALT="logo GED" width="255" height="248"/><br><br><br>
Charge de système climatisé mobile à <br>
domicile dans les plus brefs délais.
</div>
<div id="bandebleu">
   <a href="mailto:fraipont.j@gmail.com"><span id="colorblack">WEBMASTER</span></a>
</div>
<div id="corp">
blabla
</div>