3 divs nebeneinander + menü in der Mitte ?

[fraggle]

Hallo,

ich realisiere momentan meine eigene Homepage.
Das Design habe ich in Photoshop erstellt und slice es nun Stück für Stück um es direkt mit CSS positionieren zu können.

Konkret stehe ich nun vor folgendem Problem...
... ich möchte ein Div Container mit der Breite/Höhe von 800 x 17 (#navi_container)...
... in diesen "übercontainer" lade ich folgende 3 Elemente ....
... Festes Bild (130x17) - Menü ( Grafik: 105x17) - Festes Bild (250x17)...

(Zur Kontrolle: 130 + (4*105) + 250 = 800px | sollte also in den "navi_container" passen)
Es passt aber nicht, er rückt in die nächste Zeile (float als ob kein Platz wäre...) HILFE

Code: Alles auswählen

   
#navi_container{
    width:800px;
    height:17px;
    margin: 0 0 0 0;
}

#navi_links {
    background:url('Bilder/navi_platzhalter.jpg') #e6e6e6 no-repeat;
    width:130px;
    height:17px;
    float:left;
    }
   
#navi {
    margin:0;
    width:420px;
    height:17px;
    list-style-position:outside;
    list-style-type:none;
    }
   
#navi li {
    width:90px;
    height:17px;
    background:url('Bilder/navi_topic.jpg') #e6e6e6 no-repeat;
    float:left;
    padding-top:2px;
    padding-left:15px;
    }
   
#navi_rechts {
    background:url('Bilder/navi_rechts.jpg') #e6e6e6 no-repeat;
    width:250px;
    height:17px;
    margin:0;
    float:left;
    }


Und hier mein HTML (Body) Teil:

Code: Alles auswählen

<div id="navi_container">
  <div id="navi_links"></div>
     <ul id="navi">
        <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
    <div id="navi_rechts"></div>
</div>


Ich hoffe wirklich ihr könnt mir helfen, probiere nun schon mehrere Stunden rum (habe früher alles mit Tabellen angepasst) aber CSS macht bei mir, was es gerade will -.-

DEMO (Problemvorschau): http://666kb.com/i/baoxvus1ccuydk81q.jpg

Mit freundlichem Gruß
Fraggle

[sejuma]

Setze mal den Universalselektor mit

Code: Alles auswählen

* {margin: 0; padding: 0;}

auf "Null".
Ggf. dann für die einzelnen Elemente wieder individuell formatieren, siehe http://www.ohne-css.gehts-gar.net/0037.php

[mysql]

Hallo fraggle,

mit welchen Browsern hast du es versucht?

Grüße mysql