[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. :wink:

[Meflin]

Zitat:

Zitat von S2B

float: left weg und margin-left rein. :wink:

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 :roll: dann ist das nämlich von haus aus immer unter - statt nebeneinander.

[S2B]

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

[Thorben77]

Zitat:

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:

Zitat von Meflin

2 mal die Breite des linken Blocks??

Stimmt, vertippt, einmal reicht :wink: .

[Meflin]

Zitat:

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 :evil:

[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 :roll: [/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

[Meflin]

Danke alcaeus, scheint so als würde das ganze nun endlich passen, man glaubt es kaum :)

@Thorben: auch danke, aber nicht mehr nötig ;)

[alcaeus]

Zitat:

Zitat von Meflin

Danke alcaeus, scheint so als würde das ganze nun endlich passen, man glaubt es kaum :)

Ich bin mir nicht ganz sicher. Im IE7 und Firefox siehts gleich aus, ausser du machst das Fenster kleiner. Dann schiebt der IE7 die main-box nach unten, so dass ihr oberes Ende buendig mit dem unteren Ende der left-box ist. Also ein quasi-Zeilenumbruch, aber wegen des margin-left kann er die Box nicht ganz links rueberschieben.


BTW, du solltest evtl. die Standard-margins und -paddings ueberschreiben, und dann immer auf eigene Werte setzen, nachdem du ja auf eine fixe Breite aufbaust. Der eine Browser nimmt normal 3px, der andere 5, der eine zaehlt das Padding zur Hoehe hinzu, der andre zaehlts ab, usw. Dann wuerde das Ganze so aussehn:

Code:

body
{
   padding:10px;
}

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

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

#main
{
   width:787px;
   margin-left:190px;
}

Klein, leicht und handlich ;)

Greetz
alcaeus

[edit]Jup, kannst vergessen. Die main-Box rutscht bei einem kleinen Fenster ganz nach unten und versucht, unter die left-Box zu kommen :(
Ehrlich: ich wuerde die main-box mit position:absolute; positionieren ;)
[/edit]

[Meflin]

Zitat:

Zitat von alcaeus

Ich bin mir nicht ganz sicher. Im IE7 und Firefox siehts gleich aus, ausser du machst das Fenster kleiner. Dann schiebt der IE7 die main-box nach unten, so dass ihr oberes Ende buendig mit dem unteren Ende der left-box ist. Also ein quasi-Zeilenumbruch, aber wegen des margin-left kann er die Box nicht ganz links rueberschieben.

Zu früh gefreut, der IE 6 macht das auch :roll: Firefox bricht das ganze nicht um, Opera auch nicht. Womit wir sozusagen wieder beim Ausgangsproblem wären :wall:

Manchmal macht das echt keinen Spaß mehr...

[alcaeus]

Das funktioniert in FF (1.0.8) und IE 7 (Beta 2):

Code:

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

#left
{
   position:absolute;
   top:10px;
   left:10px;
   width:180px;
}

#main
{
   position:absolute;
   top:10px;
   left:200px;
   width:787px;
}

Ich weiss schon warum ich lieber PHP mache als die HTML-Ausgabe korrekt hinzukriegen :mrgreen:

Greetz
alcaeus

[Meflin]

es hat den Anschein als würde das jetzt wirklich funktionieren :mrgreen: bis zum nächsten "bug" ;)

[DelphiAndreas]

von festen breiten usw. rate ich ja normal ab, aber das ist hier net das Problem ;-)

ich denke du solltest eventuell mit der eigenschaft "display" arbeiten. näheres hier: SelfHTML

Gruß
Andreas

[S2B]

:gruebel:
Irgendwie verstehe ich nicht ganz, warum bei dem Problem position: absolute sein muss, bei meiner Homepage funktioniert sowas perfekt:

Code:

#left {
  float: left;
  width: 250px
}

#right {
  margin-left: 250px
}

Code:

<div>
  <div id="left">
    Test
  </div>
  <div id="right">
    Test
  </div>
  <div style="clear: left"></div>
</div>

Wenn du den Code so verwendest, darf gar nicht umgebrochen werden. :gruebel: