problem Fluid design

[Bobby]

Moin

Folgender Sachverhalt:

  
<div id="profilleft" style="margin-right:10px;float:left;width:480px">  
    <div style="background:rgb(255,255,255);border-radius:7px;">  
        <img src="...." style="height:600px;"/>  
    </div>  
</div>  
<div id="profilright" style="margin-right:0px;margin-left:520px;">  
    <div id="profilleistungen" style="background:rgb(255,255,255);border-radius:7px;">  
        <div style="padding-left:10px;margin:0;float:left;width:60%;">  
        </div>  
        <div style="padding-left:10px;margin:0;float:left;width:40%;">  
        </div>  
    </div>  
</div>  

der DIV "profilleistungen" streckt sich nun nicht mehr auf die Höhe des Inhaltes aus, weil ja das Float nicht nach den inneren 2 gefloateten Divs beendet wird.

Wie kann ich das inner float aufheben ohne das äußere Float zu beeinflußen?

Gruß Bobby

[Bobby]

Moin

als Ergänzung. Wenn ich ein Element Einfüge, das das Float aufhebt (ein br oder so) dann erstreckt sich der Hintergrund des Profilleistungen-Div auf die gleiche Größe wie das linke Bild. Woran liegt das?

Gruß Bobby

[Matthias Apsel]

Om nah hoo pez nyeetz, Bobby!

<div id="profilleft" style="margin-right:10px;float:left;width:480px">
    <div style="background:rgb(255,255,255);border-radius:7px;">
        <img src="...." style="height:600px;"/>
    </div>
</div>
<div id="profilright" style="margin-right:0px;margin-left:520px;">
    <div id="profilleistungen" style="background:rgb(255,255,255);border-radius:7px;">
        <div style="padding-left:10px;margin:0;float:left;width:60%;">
        </div>
        <div style="padding-left:10px;margin:0;float:left;width:40%;">
        </div>
    </div>
</div>

  
Ich hoffe, das ist nicht der endgültige Code. Vermeide inlinestyles. Stecke alle CSS-Festlegungen in eine eigene Ressource. [wiki:CSS einbinden](http://wiki.selfhtml.org/wiki/CSS/Einbindung)  
  
Für ein Bild mit einem weißen Rand benötigt man ganz sicher nicht 2 umgebende Elemente. Alle Angaben kannst du direkt dem Bild geben.  
  
Auf profilright lässt sich sicher ebenso verzichten.  
  

> Wie kann ich das inner float aufheben ohne das äußere Float zu beeinflußen?  
  
Wenn du auf die umgebenden Wrapper-Elemente verzichtest, stellt sich das Problem nicht. Sollte dies nicht möglich sein, bietet sich (mit unterschiedlichem Browser-Support) als Ersatz für float an:  
  
flex-box, display: inline-block, display: table-cell.  
  
So wie ich das sehe, setzt du float nur ein um Elemente nebeneinander zu positionieren. Das ist nicht der Zweck von float. Dafür wurde es jahrelang missbraucht.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Messer und Messergebnis](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=M#messer).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Bobby]

Moin

Ich hoffe, das ist nicht der endgültige Code. Vermeide inlinestyles. Stecke alle CSS-Festlegungen in eine eigene Ressource. wiki:CSS einbinden

Das ist natürlich nicht endgültig, sondern nur zum testen... Selbstverständlich lagere ich das CSS aus

Für ein Bild mit einem weißen Rand benötigt man ganz sicher nicht 2 umgebende Elemente. Alle Angaben kannst du direkt dem Bild geben.

Es folgen noch weitere Elemente nach dem Bild. Es soll nicht nur der Rahmen sein

Auf profilright lässt sich sicher ebenso verzichten.

Wie kann ich das inner float aufheben ohne das äußere Float zu beeinflußen?

Wenn du auf die umgebenden Wrapper-Elemente verzichtest, stellt sich das Problem nicht. Sollte dies nicht möglich sein, bietet sich (mit unterschiedlichem Browser-Support) als Ersatz für float an:

flex-box, display: inline-block, display: table-cell.

Ok, da lässt sich sicher was probieren... Allerdings wird der ie8 da wie immer späne machen.... :/

So wie ich das sehe, setzt du float nur ein um Elemente nebeneinander zu positionieren. Das ist nicht der Zweck von float. Dafür wurde es jahrelang missbraucht.

Gibt es allgemeingültige Alternativen?

Gruß Bobby

[Der Martin]

Hallo,

Das ist natürlich nicht endgültig, sondern nur zum testen... Selbstverständlich lagere ich das CSS aus

selbst zum Testen würde ich lieber ein zentrales Stylesheet nehmen, und keine inline-styles.

flex-box, display: inline-block, display: table-cell.
Ok, da lässt sich sicher was probieren... Allerdings wird der ie8 da wie immer späne machen.... :/

Bei inline-block spielt er brav mit; bei den anderen Möglichkeiten stellt er sich teilweise blöd.

Ciao,
 Martin

[Bobby]

Moin

selbst zum Testen würde ich lieber ein zentrales Stylesheet nehmen, und keine inline-styles.

Da ich alles in eine CSS packe (wegen Anzahl zu landender Elemente über http) wird das schnell unübersichtlich.

Bei inline-block spielt er brav mit; bei den anderen Möglichkeiten stellt er sich teilweise blöd.

Hm... Käme auf einen Versuch an. Danke erstmal

Gruß Bobby

[Gunnar Bittersmann]

@@Bobby:

nuqneH

Da ich alles in eine CSS packe (wegen Anzahl zu landender Elemente über http) wird das schnell unübersichtlich.

Ein CSS-Präprozessor wäre was für dich. Damit kann man sein Stylesheet modularisieren und bekommt daraus eine CSS-Ressource generiert. http://thesassway.com/beginner/how-to-structure-a-sass-project

Oder auch mehrere: für Standard-Browser und für verschiedene alte IEs. http://bittersmann.de/talks/csspreproc, Folie 31

Qapla'