CSS Dynamisch breite DIVs in einer Zeile ohne Umbruch

[#basTi]

Hallo zusammen,

ich (CSS anfänger) habe momentan folgendes Problem:
Ich habe in meinem Header drei Elemente nebeneinander (siehe Anhang).
Dabei ist das Logo (links) mit einer festen breite versehen, wohingegen die andern beiden dynamische Breite besitzen (je nach Nutzer unterschiedliche Navigation & Benutzerbereich).

Der Header soll immer die volle Breite ausnutzen, solang alles angezeigt werden kann. Wird die Breite kleiner, als dass alle 3 Elemente nebeneinander passen, soll horizontal gescrollt werden anstatt die DIVs umzubrechen (was momentan bei mir der Fall ist).

Mein momentan benutzter Code:

#header { height: 113px; width: 100%; }
#header_logo { width: 224px; height: 100%; float: left; }
#header_navigation { float: left; padding-top: 46px;}
#header_userarea { height: 100%; float: right; text-align: right;  padding-right: 15px;}
 
 
<div id="header">
  <div id="header_logo">Logo</div>
  <div id="header_navigation">Navigation</div>
  <div id="header_userarea">User</div>
</div>

 

[Speedy.]

#header {
  min-width: 100%;
  width: 100%;
  height: 113px;
}

Wenn du dem Header die Eigenschaft min-width gibst (es muss nicht 100% sein), dann wird er nicht schmaler als du angibst. Wenn du also bspw. 500px angibst, dann wird der Header nie kleiner als 500px in der Breite und der Inhalt sollte am Platz bleiben. Es wird dann ein horizontaler Scrollbalken erzeugt, sobald das Browserfenster die entsprechende Breite unterschreitet. Das würde ich versuchen, gebe aber Mangels Praxistest keine Garantie.

 

[#basTi]

Danke schonmal für die Antwort.

Also min-width: 100% bringt leider gar nichts. Und eine feste Breite definier ich eben ungern (funktioniert aber wie gewünscht!), da eben die beiden rechten Bereiche eine Variable breite haben (als Beispiel: beide zusammen zwischen 600 und 1000 Pixeln). Ich möchte ungern für alle das Maximum definieren (vorallem weil es rein spekulativ ist.).

 

[Speedy.]

Naja, min-width funktioniert nur mit festen Angaben der Breite in Pixel. Wenn du 100% angibst, dann klappt es nicht, hätte ich noch erwähnen können.
Ich denke allerdings, dass du nicht um das Definieren einer festen Mindestbreite des Headers drum herum kommen wirst.