Darstellungsproblem mit mehreren DIV's nebeneinander

[daywandler]

Guten Morgen,

ich versuche schon seit gestern 3 DIV's nebeneinander zu platzieren, das ist mir auch soweit gelungen. Aber leider gibt es bei anderen Auflösungen Probleme bei der Darstellung und nun wollte ich Fragen wie man dies ändern kann.

Ich habe folgenden HTML-Code für meine Überschrift:

  
<div class="main">  
<div class="main_title_left"></div>  
  <div class="main_title"> Überschrift </div>  
  <div class="main_title_right"></div>  
  </div>  

Und folgenden CSS-Code:

  
.main {  
  
 margin-left:  100px;  
 margin-right:  100px;  
}  
  
.main_title_left {  
        float:                  left;  
 background-image: url(../img/border-top-left.png);  
 width:    10px;  
 height:    64px;  
 width:                  5%;  
}  
.main_title_right {  
 float:                  right;  
 background-image: url(../img/border-top-right.png);  
 width:    10px;  
 height:    64px;  
 width:                  5%;  
}  
.main_title {  
        float:                  left;  
 background-image: url(../img/border-top-center.png);  
 background-repeat: repeat-x;  
 font-size:   24px;  
 font-weight:  bold;  
 height:    45px;  
 padding-top:  25px;  
 width:89%;  
}  

Sozusagen sind es 3 Spalten wo Links und Rechts jeweils ein Bild von 60px breite und 64px höhe ist und der mittlere Teil soll 100% werden.

Ich habe schon mehreres versucht, aber z-index funktioniert auch irgendwie nicht.

Ich hoffe mir kann jemand helfen. Danke schonmal.