Wie lege ich divs horizontal, ohne übergelaufen zu werden?

Question

Ich habe ein linkes Floating Div, das als Sidebar (rot) dient. Daneben gibt es ein weiteres Div, das den Seiteninhalt speichert (grün). Die Elemente innerhalb des Inhalts-Divs bleiben schwebend (blau).

Ich möchte in der Lage sein, die Felder horizontal zu scrollen, wenn die Browserbreite zu klein ist, um sie aufzunehmen; zum Beispiel, wenn es viele Boxen gibt. Stattdessen bewegt sich das Inhalts-Div unterhalb der Seitenleiste div und ich scrollte die ganze Seite. Hier

ist das Seitenlayout, wenn das Browser-Fenster breit genug ist:

Hier ist der HTML ist:

<div id="container"> 
    <div id="sidebar">Sidebar</div> 
    <div id="content"> 
    <p class="box">Box 1</p> 
    <p class="box">Box 2</p> 
    <p class="box">Box 3</p> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

Und hier ist die CSS:

* { 
    margin: 0px; 
    padding: 0px; 
} 

#container { 
    background: yellow; 
} 

#sidebar { 
    float: left; 
    background: red; 
} 

#content { 
    float: left; 
    white-space: nowrap; 
    background: green; 
} 

.box { 
    width: 200px; 
    height: 250px; 
    background: blue; 
    margin: 10px; 
    float: left; 
} 

Bitte helfen Ich verstehe, was ich falsch mache. Vielen Dank.

Answer 1

Sie brauchen einfach etwas, um Ihren Inhalt mit der CSS-Eigenschaft overflow-x: scroll; zu umhüllen.

* * Wichtig: Dies ist eine CSS3-Funktion und einige Browser unterstützen möglicherweise overflox-x nicht. Daher empfehle ich Ihnen, Folgendes zu lesen: http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/.

Vorschau: http://jsfiddle.net/WXFJU/

HTML

<div id="container"> 
    <div id="sidebar">Sidebar</div> 
    <div class="overflow-x"> 
     <div id="content"> 
     <p class="box">Box 1</p> 
     <p class="box">Box 2</p> 
     <p class="box">Box 3</p> 
     </div> 
    </div> 
    <div style="clear: both;"></div> 
</div>​​​​​ 

CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 

#container { 
    width: 100%; 
    background: yellow; 
} 

#sidebar { 
    float: left; 
    background: red; 
} 

#content { 
    float: left; 
    white-space: nowrap; 
    background: green; 
} 

.box { 
    width: 200px; 
    height: 250px; 
    background: blue; 
    margin: 10px; 
    float: left; 
} 

.overflow-x { 
    overflow-x: scroll; 
    display: block; 
} 

Answer 2

Sie müssen auch eine Breite für die container festlegen.

Answer 3

Ihr content-div muss auch eine Breite haben.

#content { 
    width: 1000px; 
}