[CSS] verhindern, dass DIV umbricht

[Meflin]

Aloa!

Ich bastel gerade mal wieder an einer Webseite, die vom Prinzip her so aufgebaut ist (Design tabellenlos):

Code:

++++++++++++++++++++  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ DIV id=left      +  +  DIV id=main                                                          +
+ ################ +  +                                                                       +
+ #              # +  +                                                                       +
+ #  hier andere # +  +                                                                       +
+ #      divs    # +  +                                                                       +
+ ################ +  +                                                                       +
+                  +  +                                                                       +
+ ################ +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ ################ +  +                                                                       +
+                  +  +                                                                       +
++++++++++++++++++++  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Mein CSS dafür sieht wie folgt aus:

Code:

#left {
   margin: 10px;
   width: 180px;
   float: left;
}

#main {
   width: 787px;
   float: left;
   margin: 10px;
   margin-left: 0px;
   top: 0px;
   /*position: absolute;
   left: 200px;*/
}

Problem: wenn der Bildschirm zu klein ist, wird der main-Teil umgebrochen und unter dem Left Teil platziert, das will ich aber auf jeden Fall verhindern. wenn man in der main Klasse (ist das eine?) den auskommentierten Teil aktiviert, wird das auch erfolgreich verhindert, nur macht dann der IE (wie immer) wieder Probleme: er interpretiert den Abstand zwischen left und main Teil falsch, genauergesagt er klebt beides einfach nebeneinander ohne den margin von 10 zu beachten, während in allen anderen Browsern alles passt. Verpasse ich main ein extra left-margin stimmts zwar im IE, dafür ist der Abstand in allen anderen Browsern aber viel zu groß.

Es stellt sich also die Frage: was tun?

[DGL-luke]

einfach bei den width-angaben auf prozente gehen:

Code:

#left {
   margin: 5%;
   width: 20%;
   float: left;
}

#main {
   width: 75%;
   float: left;
   margin: 10px;
   margin-left: 0px;
   top: 0px;
   /*position: absolute;
   left: 200px;*/
}

[Meflin]

Das ist keine Lösung, die Bereiche sollen ja immer gleich groß sein und sich nicht dem Bildschirm anpassen...

[S2B]

float: left weg und margin-left rein.

[Meflin]

Zitat von S2B:

float: left weg und margin-left rein.

hilft auch nix, dann wird das ganze beim verkleinerten bildschirm immernoch umgebrochen (wenn ich das float bei #left drin lasse). Nimm ich das float bei #left raus... nein, das kannst du nicht gemeint haben dann ist das nämlich von haus aus immer unter - statt nebeneinander.

[S2B]

OK. Mach das von vorher und nimm zusätzlich noch das width vom #right raus, dann müsste es normal laufen...

[Thorben77]

Zitat von Meflin:

er interpretiert den Abstand zwischen left und main Teil falsch, genauergesagt er klebt beides einfach nebeneinander ohne den margin von 10 zu beachten, während in allen anderen Browsern alles passt.

Der IE scheint die zweite Margin-Angabe anzuwenden, die anderen Browser ignorieren die wohl.

Code:

margin: 10px; // den Wert nehmen die anderen Browser für Margin-Left
margin-left: 0px; // und den der IE

Nimm mal das "float:left" beim Main-Block weg, das ist überflüssig.

Code:

margin: 10px;
margin-left: 0px;

Das solltest Du zu einer Angabe zusammenfassen:

Code:

margin:10px 10px 10px 0px;

Der erste ist der Margin-Wert für obern, der zweite für rechts, der dritte für unten und der vierte für links.
Also kannst Du auch schreiben:

Code:

margin-top:10px;
margin-right10px;
margin-bottom:10px;
margin-left:0px;

Und die Lösung für Dein Problem sollte das hier sein:

Code:

#left {
   margin: 10px;
   width: 180px;
   float: left;
}

#main {
   width: 787px;
   margin:10px 10px 10px 200px;
}

Der Margin-Left-Wert des Main-Blocks sollte so groß sein, wie 1 mal die Breite des linken Blocks plus 2 mal den Margin-Wert des linken Blocks plus den Abstand, den er zum linken Block haben soll (sind hier 10 Pixel).

MfG

Edit:

Zitat von Meflin:

2 mal die Breite des linken Blocks??

Stimmt, vertippt, einmal reicht .

[Meflin]

Zitat von Thorben77:

Der Margin-Left-Wert des Main-Blocks sollte so groß sein, wie 2 mal die Breite des linken Blocks plus 2 mal den Margin-Wert des linken Blocks plus den Abstand, den er zum linken Block haben soll (sind hier 10 Pixel).

2 mal die Breite des linken Blocks?? eher nicht, dann ist der Abstand genau doppelt so groß wie er sein soll Mein Urprungsproblem wäre damit gelöst, dadür taucht nun ein neues auf:

Code:

margin:10px 10px 10px 200px;

führt nun wieder im Firefox dazu, dass der #left-Teil genau 10px zu weit nach unten Gesetzt wird, die beiden Blocks sind nicht mehr auf einer Höhe. Im IE wäre alles so wie es sein soll; versucht man das ganze via einer margin-top Angabe im #left zu korrigieren, stimmts im Firefox, dafür aber im IE nicht mehr... der setzt den #left Teil dann zu weit nach oben

[alcaeus]

Das scheint tatsaechlich ein Problem mitm Fuchs zu sein. Ich habs mal so gemacht:

Code:

body
{
   padding:10px;
}

#left
{
   border:1px solid green;
   margin:0px 10px 0px 0px;
   width:180px;
   float:left;
}

#main
{
   border:1px solid red;
   width:787px;
   margin:0px 0px 0px 190px;
}

Dann passt die Hoehe auch wieder

Greetz
alcaeus

[edit]Wird im IE7 halt 10px nach unten geschoben (aber nicht komplett unter die Navi) wenn das Fenster zu klein ist...ich seh mir das nochmal an [/edit]

[Thorben77]

Moin.

Versuch mal, die beiden Blöcke in einen anderen zu packen, der ein Margin-Top von 10px hat, die beiden anderen 0px.

HTML:

Code:

<div style="margin-top:10px">
  <div id="left">
    ...
  </div>
  <div id="main">
    ...
  </div>
</div>

CSS:

Code:

#left {
  float:left;
  margin:0px 10px 10px 10px;
  width:180px;
}

#main {
  margin:0px 10px 10px 200px;
}

MfG