ThomasG: Div wird umgebrochen

Hallo wer kann mir helfen?

ich habe in meinem Header 3 Div's mit jeweils einer hinterlegten Jpg-Datei. Diese Div's sind dynamisch mit %-Angaben, damit die Seite bei breiteren Monitoren den gesamten Bildschirm ausfüllt. Das Ganze funktioniert auch bei einer Seitenbreite von 1280px und mehr. Nur nicht, wenn geringere Auflösungen eingelstellt sind z.B. wenn die Seitenbreite 1024px oder weniger beträgt. Bei diesen Auflösungen wird das 3. Div in die nächste Zeile umgebrochen und unter dem 1. Div dargestellt.
Wie kann ich es realisieren, dass das 3. Div bei geringer Auflösung nicht umgebrochen wird. Sondern stattdessen ein horizontaler Scrollbalken eingefügt wird, durch den die ganze Seitenbreite dargestellt wird. Die automatische Dynamik bei breiteren Monitoren sollte hierbei erhalten bleiben.

Für Anregungen und Ratschläge wäre ich sehr dankbar.

Gruß
Thomas

HTML

<div id="header">

<div class="box001">
  <p id="logo001"><img src="../images/mvlogo001.jpg"></p>
</div><!-- Box 001 -->

<div class="box001">
  <p id="text001"><img src="../images/mvtext001.jpg"></p>
</div><!-- Box 002 -->

<div class="box002">
  <p id="foto002"><img src="../images/mvfoto002.jpg"></p>
</div><!-- Box 003-->

</div><!-- Header -->

CSS

* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Georgia, Helvetica, Arial, sans-serif, "Times Roman";
background-color: #600;
color:  #000;
}
img {
border: none;
}

/*   ======   Wrapper   ======   */
#wrapper {
height: 100%;
min-height: 100%;
margin: 0 181px -25px 201px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #e0d0b0;
color: #000;
}

html>body #wrapper {
height: auto;
}

/*   ======   Header   ======   */
#header {
position: relative;
height: 161px;
margin: 0 -182px 0 -202px;
background-color: #600;
color: #fff;
}

.box001 {
float: left;
display: table;
height: 161px;
width: 33.2%;
}

.box002 {
float: right;
height: 161px;
width: 33.2%;
}

#logo001 {
text-align: center;
padding-top: 21px;
}

#text001 {
text-align: center;
padding-top: 21px;
}

#foto002 {
float: right;
}

  1. Für Anregungen und Ratschläge wäre ich sehr dankbar.

    Definiere eine Minimalbreite für das gemeinsame umgebende Element.

    1. Für Anregungen und Ratschläge wäre ich sehr dankbar.

      Definiere eine Minimalbreite für das gemeinsame umgebende Element.

      Danke für den Tip, dies hat keine Änderung gebracht

      Gruß
      Thomas

      1. Danke für den Tip, dies hat keine Änderung gebracht

        Glaub' ich nicht.

        1. Danke für den Tip, dies hat keine Änderung gebracht

          Glaub' ich nicht.

          Ist aber unter dem IE6 so, erst ab der Version 7 funktioniert es. Da noch recht viele Besucher unserer HP diesen benutzen, muß ich hierfür eine Lösung finden.

          Gruß
          Thomas

          1. Ist aber unter dem IE6 so, erst ab der Version 7 funktioniert es.

            Aha! :)

            Deine Aussage war aber, dass es keine Änderung gebracht hätte - dass es nur in bestimmten Browsern funktioniert, hättest du ggf. erwähnen sollen.

            Da noch recht viele Besucher unserer HP diesen benutzen, muß ich hierfür eine Lösung finden.

            Zwei Lösungen:

            1. der IE6 bekommt eine feste Breite und beim aktivem JavaScript, wird mit dynamischen Eigenschaften eine variable Breite erreicht.

            2. dasselbe nur umgekehrt: variable Breite für den IE 6 und beim aktivem JavaScript wird mittels dynamischen Eigenschaften die Breite beschränkt bzw. min-width simuliert.

            1. Ist aber unter dem IE6 so, erst ab der Version 7 funktioniert es.

              Aha! :)

              Deine Aussage war aber, dass es keine Änderung gebracht hätte - dass es nur in bestimmten Browsern funktioniert, hättest du ggf. erwähnen sollen.

              Da noch recht viele Besucher unserer HP diesen benutzen, muß ich hierfür eine Lösung finden.

              Zwei Lösungen:

              1. der IE6 bekommt eine feste Breite und beim aktivem JavaScript, wird mit dynamischen Eigenschaften eine variable Breite erreicht.

              2. dasselbe nur umgekehrt: variable Breite für den IE 6 und beim aktivem JavaScript wird mittels dynamischen Eigenschaften die Breite beschränkt bzw. min-width simuliert.

              Danke für den Tip, jetzt kalppt es ohne Umbruch. Aber leider ist dadurch ein neues Problem aufgetreten, welches ich auch nach etlichen Stunden noch nicht lösen konnte. Hier im Forum bin auch noch nicht fündig geworden hierzu.
              Dadurch, dass jetzt ein horizontaler Scrollbaken eingefügt wird, verbreitert sich meine Leiste im Footer nicht. Diese Leiste ist immer so breit wie der sichtbare Bereich am Monitor, aber erweitert sich nicht auf den Bereich der mit dem Scrollbalken erreichbar ist.
              Gibt es vielleicht eine Anweisung mit der ich die Leiste auf Seitenbreite bringen kann (sichtbarer Bereich plus Bereich über Scrollbalken)?

              Gruß
              Thomas