• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zwei Float Elemente untereinander?

Freshmojojo

Freshmojojo

Mitglied
Moin zusammen,
ich habe momentan ein kleines Problem:
Ich habe eine Produktdetailseite, die verschiedene von einem CMS generierten Elementen. Sprich: Produktbild, Produktname etc. . Nun habe ich einen Div-Container, der enthält all diese Atribute. Ich möchte nun gerne das Produktbild und ein anderes Atribut auf die Rechte Seite haben und den Rest auf die linke Seite. Nur mit dem Bild funktioniert das auch gut:
HTML: 
<div class="atr_container">
     <div class="pr_bild">
     <div class="atr_rechts">
     <div class="atr_linkts_1">
     <div class="atr_linkts_2">
     <div class="atr_linkts_3">
</div>
Dazu habe ich den Container vom Bild auf rechts gefloatet.

Jetzt möchte ich auch noch das atr_rechts nach rechts bringen. jedoch wenn ich dies auch auf rechts floate ist es auf einmal über dem Bild?! Hab ich irgenwie einen Denkfehler drinne? Leider kann ich auch nicht die beiden Container (bild und rechts_atr) in einen neuen Container packen den ich dann insgesamt auf rechts floate. (Wegen dem CMS :/)
Ich hoffe ihr könnt mir da helfen. Vielen Dank!
LG
 
Alles was du hintereinander weg floatest, wird sich nebeneinander darstellen. Nicht untereinander. Und zwar in der Reihenfolge, wie die Elemente im Code stehen. Wenn atr_rechts nun über dem Bild erscheint, ist deine Reihenfolge entweder anders als hier in dem Beispiel, oder du hast in pr_bild über dem Image einen Leerraum, in den sich der Text von atr_rechts reinquetscht. Das ist aber nur das, was du sehen kannst. Worauf es hier ankommt sind deine DIV-Container (auf deren (nicht) Notwendigkeit ich jetzt nicht näher eingehe). Die reihen sich nebeneinander auf, so lange du einen vorangegangenen Float nicht mit clear "resetest".
Kurz gesagt:
Wenn atr_rechts unterhalb von pr_bild erscheinen soll und beide Elemente rechts gefloatet sind, musst du zwischen den Beiden ein clear:right; einbauen.
 
Ja der Gedankengang ist richtig, aber wenn ich jetzt clearen würde, dann würden doch die ganzen Elemente die links neben dem Bild sein sollen auch mit herunter unter das Bild rutschen oder nicht?
 
So oder so wirst Du die Container, die rechts stehen sollen, in einen Container mit float: right packen müssen und die anderen Container, die links stehen sollen, in einen Container mit float: left... ich nehme anders wirst Du das, was Du wahrscheinlich erreichen möchtest, nicht hinbekommen
 
gUCK MAL, OB DU ES SO GEBRAUCHEN KANNST.
HTML: 
<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>

* {
margin:0;
padding:0;
}

.atr_container {
width:50%;
margin:20px auto;
border:1px solid #000;
padding:10px;
overflow:hidden;
}

.atr_links , .atr_rechts , .pr_bild {
width:50%;
margin-bottom:4px;
background:#ddd;
}

.pr_bild , .atr_rechts {
float:right;
}

.atr_rechts {
clear:right;
}
img {
 width:100%;
}
</style>
</head>

<body>

<div class="atr_container">
  <div class="pr_bild"><img src="bild2.jpg"></div>
  <div class="atr_rechts"><P>tEXT</P></div>
  <div class="atr_links"><P>links</P></div>
  <div class="atr_links"><P>links</P></div>
  <div class="atr_links"><P>links</P></div>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
djheke schrieb:
gUCK MAL, OB DU ES SO GEBRAUCHEN KANNST.
HTML: 
<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>

* {
margin:0;
padding:0;
}

.atr_container {
width:50%;
margin:20px auto;
border:1px solid #000;
padding:10px;
overflow:hidden;
}

.atr_links , .atr_rechts , .pr_bild {
width:50%;
margin-bottom:4px;
background:#ddd;
}

.pr_bild , .atr_rechts {
float:right;
}

.atr_rechts {
clear:right;
}
img {
width:100%;
}
</style>
</head>

<body>

<div class="atr_container">
  <div class="pr_bild"><img src="bild2.jpg"></div>
  <div class="atr_rechts"><P>tEXT</P></div>
  <div class="atr_links"><P>links</P></div>
  <div class="atr_links"><P>links</P></div>
  <div class="atr_links"><P>links</P></div>
</div>

</body>
</html>
Zum Vergrößern anklicken....
Top Danke! Ist zwar ein bisschen eigenartig und ich finde es nicht gerade logisch aber es funktioniert ja :)
 
Doch, die Logik steckt in diesem Fall in den Blockelementen. Experimentiere einfach mal ein bisschen herum.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben