✔ CSS-Layout mit DIV Elementen - Zeilenumbrüche verhindern

[FunkyMonkey]

Hallo

ich arbeite an einem Layout welches mit DIV-Containern gestaltet wird, statt mit Tabellen.

Ich habe links einen etwa 200 pixel breiten Container für das Menü mit 100% höhe und float:left.

Rechts daneben ist ein DIV-Container mit dem Hauptcontent. Das Problem: Sobald das Browserfenster kleiner wird und der Hauptcontent eigentlich einen Scroll verursachen müsste, flutscht mir das DIV unter den Menü-Container.

Das dumme daran: Ich weis, man könnte das unterbinden wenn man drumherum ein übergeordnetes Div legt und dem eine feste Breite gibt.

Allerdings wäre mein Layout dann total unflexibel, und genau das soll es nicht sein.

Gibt es in CSS irgend eine sinnvolle Möglichkeit zu sagen das zwei Container *immer* nebeneinander erscheinen *müssen*, also auf gar keinen Fall ein Zeilenumbruch erfolgt, auch wenn die Scrollbar eingeblendet werden müsste?

 

[Maik]

Hi,

ohne jetzt den Quellcode der Seite zu kennen, empfehle ich folgendes Modell, bei dem die rechte Spalte nicht unter die linke rutscht, wenn das Fenster verkleinert wird:

#leftCol {
width:200px;
float:left;
background:#ccc;
}

#rightCol {
margin-left:200px;
background:#ddd;
}

Ansonsten bliebe noch die Möglichkeit, ein übergeordnetes Element mit einer Mindestbreite min-width einzurichten, somit wäre das Layout bis zu einem gewissen Grad flexibel.

 

[FunkyMonkey]

danke für den Tipp! Was bewirkt das margin-left? mich wundert, dass das Element nun nicht 200px Abstand zum linken hat (?)

 

[Maik]

margin-left:200px bezieht sich in diesem Fall nicht auf das benachbarte, sondern auf das übergeordnete Element, und bewirkt, dass das umfliessende Element #rightCol seinen Inhalt nicht linksbündig unterhalb dem zu umfliessenden Element #leftCol fortsetzt, sobald die Zeilenanzahl größer ist.

Als Beispiel:

#leftCol {
width:200px;
float:left;
background:#ccc;
}

#rightCol {
/*margin-left:200px;*/ /* auskommentiert = deaktiviert */
background:#ddd;
}

<div id="leftCol">leftCol</div>
<div id="rightCol">rightCol<br>rightCol</div>

 

[FunkyMonkey]

super! Danke Dir!