Floating Div probleme

[Christian G.]

Hallo an all' euch (x)HTML und CSS Jünger, heute habe ich mal ein Problem bei dem ich nicht Herr über die lage werden konnte. Auch das Stundenlange versuchen und probieren von diversen Tutorials half mir nicht.

Problem:
Habe ein Div mit der ID "außen", dieses Div umfasst die beiden Div's die ich darin NEBENEINANDER floaten lassen möchte und hat eine Breite von 100%.
Das DIV "aussen" sitzt übrigens in mitten von einer ellenlangen Verschachtelung aus diversen weiteren divs mit Prozentualen breitenwerten.

In diesem Div habe ich einmal DIV mit id "links" und einmal ein Div mit "rechts"

Ok das div "links" (was links von div "rechts" sein soll) soll ebenfalls eine variable breite haben und sich so mit dem Gesamten Fenster größer ziehen, während div "rechts" eine Feste breite von 400px hat und rechts von div "links" positioniert sein soll.

Zum Problem:
Egal ob ich div "links" den befehl "float:left" gebe oder div "rechts" den befehl "float:right" oder gar beides gemeinsam gebe, es funzt nicht.
Entweder schiebt sich div "rechts" unter div "links"(so das div "links" darauf liegt) oder div "rechts" positioniert sich rechts-unter dem äußeren div "aussen".

Einmal hat es auch funktioniert das beide nebeneinander waren, nur waren sie gemeinsam aus div "aussen" ausgetreten und haben sich drunter positioniert...

Was mache ich falsch?

Mfg Christian G.

[ChrisB]

Hi,

Einmal hat es auch funktioniert das beide nebeneinander waren, nur waren sie gemeinsam aus div "aussen" ausgetreten und haben sich drunter positioniert...

Was mache ich falsch?

Du hast float nicht verstanden.

</archiv/2007/1/t143585/#m932279>

MfG ChrisB

[Christian G]

Hi,

Einmal hat es auch funktioniert das beide nebeneinander waren, nur waren sie gemeinsam aus div "aussen" ausgetreten und haben sich drunter positioniert...

Was mache ich falsch?

Du hast float nicht verstanden.

</archiv/2007/1/t143585/#m932279>

MfG ChrisB

Wow danke der link hat mir sehr weitergeholfen.
Habe nun unter dem div "rechts" ein <br class="clear"> eingefügt mit den attributen:
 clear:both;
 margin:0px;
 line-height:0px;
 padding:0px;
 font-size:0px;

Das bringt es tatsächlich dazu das "aussen" div um die beiden "floater" rumzu-ziehen.
Nur leider schiebt sich der Inhalt von div "links" immernoch unter(so das div rechts darauf liegt) den inhalt von div "rechts".

Wie ist das denn mit den Breiten? Kann ich div "rechts" bsp. 400px width geben und left bekommt den "rest"? Weil so habe ich es momentan spezifiziert, was zu oben genanntem führt...

Mfg Christian G

[ChrisB]

Hi,

bitte zitiere sinnvoll, und nicht einfach alles.

Wie ist das denn mit den Breiten? Kann ich div "rechts" bsp. 400px width geben und left bekommt den "rest"?

Ja, klar -

Weil so habe ich es momentan spezifiziert, was zu oben genanntem führt...

• so lange left dann seinerseits keinen Inhalt hat, der mehr als die zur Verfuegung stehende Breite fordert.

Du floatest also nur eins der beiden Elemente, und laesst den Inhalt des anderen drumherum fliessen. Wenn es dann, so das umflossene Element "kuerzer" ist, nicht auch den Platz darunter einnehmen soll, vergibst du noch ein seitliches margin.

MfG ChrisB

[Christian G]

Hi,
bitte zitiere sinnvoll, und nicht einfach alles.

Hi, ok wird gemacht, bin neu hier

• so lange left dann seinerseits keinen Inhalt hat, der mehr als die zur Verfuegung stehende Breite fordert.

Du floatest also nur eins der beiden Elemente, und laesst den Inhalt des anderen drumherum fliessen. Wenn es dann, so das umflossene Element "kuerzer" ist, nicht auch den Platz darunter einnehmen soll, vergibst du noch ein seitliches margin.

Also, es tut mir Leid das ich deine Zeit hier weiterhin in anspruch nehmen muss, aber ich scheine es nicht ganz hin zu bekommen.

Momentan habe ich als Notlösung folgendes spezifiziert, welches dazu führt das bei der kleinsten "akzeptierten" Auflösung beide divs bündig nebeneinander liegen. Natürlich ist das bei großen auflösungen "Mist" da der 63% bereich dann eben sehr klein ist:

div "left": float:left; width:63%; display:block;
div "right":float:right; width:400px; display:block;
div "aussen hat die class .clearfix welche ihrerseits die folgenden eigenschaften hat, denn so musste ich kein weiteres clearendes div oder BR einsetzen:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

So, wenn immer ich nun bei dem div "right" das float entferne, schieben sie sich übereinander, sprich Text wird unlesbar.

Entferne ich bei div "left" das float:left, positioniert sich das div "über"(so wie divs das normalerweise tun) dem div "right".

Merkwürdige Sache. Hätte gerne wie gesagt für div "left" alle zur verfügung stehende breite und "right" feste 400px.

Mfg Christian G.

[Harlequin]

Yerf!

Entferne ich bei div "left" das float:left, positioniert sich das div "über"(so wie divs das normalerweise tun) dem div "right".

Merkwürdige Sache. Hätte gerne wie gesagt für div "left" alle zur verfügung stehende breite und "right" feste 400px.

Entferne vom "left" die Breite und das float. Dann beachte noch die Verkehrsregeln (rechts vor links) und es sollte gehen.

Ein gefloatetes Element muss *immer* vor dem Element stehen von dem es umflossen werden soll. Bei float:left macht mans automatisch richtig, bei float:right siehts erst mal komisch aus, wenn man das rechte Element vor dem linken notieren soll. Aber genau so muss es sein.

Gruß,

Harlequin

[Christian G]

Yerf!

Entferne ich bei div "left" das float:left, positioniert sich das div "über"(so wie divs das normalerweise tun) dem div "right".

Merkwürdige Sache. Hätte gerne wie gesagt für div "left" alle zur verfügung stehende breite und "right" feste 400px.

Entferne vom "left" die Breite und das float. Dann beachte noch die Verkehrsregeln (rechts vor links) und es sollte gehen.

Ein gefloatetes Element muss *immer* vor dem Element stehen von dem es umflossen werden soll. Bei float:left macht mans automatisch richtig, bei float:right siehts erst mal komisch aus, wenn man das rechte Element vor dem linken notieren soll. Aber genau so muss es sein.

Gruß,

Harlequin

WOW danke!!!! Das war es gewesen - habe das mit den "Vehrkehrsregeln" wohl irgendwo in den ganzen englischen Tutorials vergessen/überlesen.

Vielen lieben dank euch beiden nochmal!!!!!

Ich hoffe das hilft nun auch anderen die das entweder per Suchmaschine finden, oder direkt drauf hingwiesen werden (per Link o.Ä)

Mfg Christian G