[CSS] verhindern, dass DIV umbricht

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