Div wird umgebrochen

[ThomasG]

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;
}