✔ Div Positionierung klappt nicht ganz

[xtramen01]

Hallo Leute,

habe ein recht simples Problem und weis nicht warum.

<div style="float:left;"><h3>{$products_name}</h3>{$products_nr}{$products_model}</div><div style=" text-align:right;"><span style="font-size:13px; font-weight:bold;">{$products_price}</span><small>{$price_unit}</small><br><small>{$mwst_versand}</small>{if $bundle}<br><br><span style="font-size:12px; font-weight:bold; color:red;"><blink>{$bundle_diff_text}{$bundle_diff}</blink></span><br /> <small>{$bundle_diff_text_unitprice}</small>{/if}</div>

<div>&nbsp;</div>

<div>{$products_image}</div>

Das letzte Div soll direkt unter den darüberliegenden positioniert werden(ohne das leere div). Ausrichtung soll links sein.

Ohne "<div>&nbsp;</div>" wird es zwar wie gewünscht platziert aber nicht linksbündig, auch wenn ich die entsprechende Anweisung in den style Tag schreibe.
Egal wie ich den Container formatiere. Ich muss einen leeren Container mit einem Leerzeichen drüber platzieren.
Das Problem tritt auch an anderen Stellen auf.

hebe ich mit clear:both die Floatumgebung auf, so wird der letzte Container irgendwo gaaaanz unten auf der Seite platziert.

Weis jemand was ich falsch mache?

Gruss

 

[Maik]

Hi,

<div style="float:left;"><h3>{$products_name}</h3>{$products_nr}{$products_model}</div><div style=" text-align:right;"><span style="font-size:13px; font-weight:bold;">{$products_price}</span><small>{$price_unit}</small><br><small>{$mwst_versand}</small>{if $bundle}<br><br><span style="font-size:12px; font-weight:bold; color:red;"><blink>{$bundle_diff_text}{$bundle_diff}</blink></span><br /> <small>{$bundle_diff_text_unitprice}</small>{/if}</div>

<!--<div>&nbsp;</div>-->

<div style="clear:left;">{$products_image}</div>

... bricht den Umfluß ab, und richtet das DIV unterhalb des linken Blocks aus.

Mit welchem Abstand, ist in deiner derzeitigen Konstruktion vom Inhalt im rechten Spaltenblock abhängig, wie es hier meine beiden hinzugefügten Hintergrundfarben und der erweiterte Inhalt verdeutlichen:



Folglich wirst du entweder das Markup so umstrukturieren müssen, dass die beiden linken DIV-Blöcke Nachfolgeelemente eines DIV-Blocks sind, der die linke Spalte bildet, und rechtsseitig umflossen wird, oder du verpflanzt kurzerhand "{$products_image}" direkt in das erste DIV:

<div style="float:left;">
     <h3>{$products_name}</h3>
     {$products_nr}{$products_model}<br><br>
     {$products_image}
</div>

mfg Maik

 

[xtramen01]

Hi und danke,

aber das hab ich auch schon versucht.
Ich hab grad gesehen das ich das Layout nach einem Tutorial von Dir benutze: http://www.tutorials.de/forum/css-tutorials/279637-zentriertes-layout-mit-drei-spalten.html.

Erstmal danke dafür

Problem ist, sobald ich im centerbreich eine Floatumgebung aufhebe...egal wie...egal wo und wann...dann rutscht nachfolgendes DIV soweit nach unten wie der Inhalt von leftCol.


Weist du woran das liegen kann?

gruss

 

[Maik]

Sorry, wir sind "vorhin" von meinem Provider im wahrsten Sinne des Wortes unterbrochen worden, denn just in dem Moment, als ich antworten wollte, war ich plötzlich von der Außenwelt abgeschnitten (Festnetz-Telefonleitung und Internetzugang waren mind. für 9 Stunden tot)

Jawoll, ich weiß, woran das liegt

In meinem Tutorial-Beispiel umfließt der mittlere DIV-Block #centerCol mit seinem horizontalen Außenabstand margin:0 200px die beiden äußeren Spalten, die jeweils eine float:left/right-Regel besitzen.

Werden in ihm nun weitere Floats vorgenommen, und mit der clear-Eigenschaft ordnungsgemäß beendet, orientieren sich die Browser an der float-Eigenschaft des benachbarten Elements, und setzen den nachfolgenden Inhalt im mittleren Container dort fort, wo die linke Spalte mit ihrem Inhalt höhenmäßig endet.

Lösung?

Den DIV-Block ebenfalls mit einer float-Regel aus dem normalen Dokumentfluß nehmen.

In meinem Code wird hierfür die Reihenfolge der drei DIV-Blöcke umgestellt:

<div id="wrapper" class="clearfix">
     <div id="leftCol"></div>
     <div id="centerCol"></div>
     <div id="rightCol"></div>
</div>

und die Regeln für #centerCol neu aufgestellt:

div#centerCol {
/*margin: 0 200px;*/
float:left;
width:400px;
}

mfg Maik

 

[xtramen01]

Hi Maik,

vielen Dank für die Erklärung! hat mir sehr geholfen

Gruss