✔ Float Clearen tut's nicht..

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!

In meinem Content-Bereich möchte ich h3-Überschriften links, p's rechts davon positionieren. Das mache ich bisher so:
Code: 
 <div id="content">
    <h3>Schlagwort</h3>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="clear"></div>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="clear"></div>
    <h3>Schlagwort</h3>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="clear"></div>
</div>
Code: 
h3{
    float:left;
    width:179px;
    margin:0 30px 0 0;
    padding:0 0 0 75px;
    text-align:right;
}

p{ /* Fliesstext */
    float:right;
    width:466px;
    margin:0 0 26px 0;
    padding:0 75px 0 0;
}

.clear{ /* clear floats */
    height:0;
    margin:0;
    padding:0;
    font-size:1px;
    clear:both;
}
Soweit alles gut.
Nun kann es passieren, dass zu einem Absatz auch mal keine h3 kommt. Wegen den technischen Gegebenheiten (CMS) kann ich aber nicht nach jedem p-Tag ein clear-div einsetzen.
Dieses benötige ich aber, damit die h3 nicht zu dem p ohne h3 hochrutscht.

Daher habe ich es mit der "clear:after"-Methode versucht (jedes p bekommt die Klasse p zugewiesen):
Code: 
.clearfloat:after {
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
    content:".";
    }
    
.clearfloat {
    display:inline-block;
    }    

.clearfloat {
    display:block;
    }
Das funktioniert aber nicht. Offensichtlich werden die float-Elemente nicht gecleart.
Hat jemand eine idee warum bzw. eine Idee, wie ich's anders machen könnte?
 
Zuletzt bearbeitet:
Hola!

Der h3 brauche ich keine Klasse zuweisen, da ich diese ja direkt ansprechen kann.
Getestet habe ich in FF, IE und Safari. Geht leider nirgends.
Was meinst Du mit .clearfloat und .clearfix

Vielleicht sollte ich den Gedankengang nochmal erklären:
Ich sollte nach jedem p die floats clearen, damit die h3 jeweils neben dem richtigen p steht. Cleare ich nicht nach jedem p, rutscht die h3 ggf. so weit nach oben, wie das erste p ohne h3 steht (ui kompliziert..) ;-)
 
Hi,

so würde mein Vorschlag aussehen:

Code: 
<div id="content">
    <h3>Schlagwort</h3>
    <p class="float-right">Lorem ipsum dolor sit amet.</p>
    <div class="clear"></div>
    <p>Lorem ipsum dolor sit amet.</p>
    <h3>Schlagwort</h3>
    <p class="float-right">Lorem ipsum dolor sit amet.</p>
    <div class="clear"></div>
</div>
Code: 
h3{
    float:left;
    width:179px;
    margin:0 30px 0 0;
    padding:0 0 0 75px;
    text-align:right;
}

p.float-right{ /* Fliesstext */
    float:right;
    width:466px;
    margin:0 0 26px 0;
    padding:0 75px 0 0;
}

.clear{ /* clear floats */
    height:0;
    margin:0;
    padding:0;
    font-size:1px;
    clear:both;
}
Die angesprochene .clearfloat-Klasse würde in deinem Modell nur funktionieren, wenn sie in einem übergeordneten Element aufgerufen wird, das die beiden Float-Elemente (h3 & p) umschliesst.

mfg Maik
 
Hallo Maik,

da ich eh nur p-Elemente habe, die rechts floaten, kann ich mir die Extra-Auszeichnung doch eigentlich sparen, oder? Weil so wie Du's mir vorschlägst habe ich es ja eh schon gemacht :(
Das Problem ist ja, dass ich die clear-div's innerhalb des CMS nicht generieren kann. Daher suche ich nach einer Möglichkeit, ohne die clear-div's auszukommen.
 
Hi,

bin davon ausgegangen, dass nur das p-Element floaten soll, das sich neben einem h3-Element befindet.

Ansonsten binde jeweils das h3- und p-Element in ein übergeordnetes Element ein, und zeichne dieses mit der .clearfloat-Klasse aus.

mfg Maik
 
So wie es momentan aussieht, habe ich von html-Seite keinen Einfluß darauf, was innerhalb des content-Elements abläuft. Soll heißen, ich kann nur css-seitig eingreifen. Damit wäre auch Dein Vorschlag, ein übergeordnetes Element einzuführen, nicht machbar.
Und da gibt's gar keine Möglichkeit, das anders anzugehen?
Ich werde noch mal Rücksprache halten. Es kann doch nicht sein, dass es daran scheitert :mad:
 
Die beiden Möglichkeiten, die dir in diesem Modell zur Verfügung stehen und browserübergreifend funktionieren, sind von deiner und meiner Seite genannt worden.

Entweder das jeweils dazwischengeschobene

Code: 
<div class="clear"></div>
oder

Code: 
<div class="clearfloat">
    <h3>Schlagwort</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="clearfloat">
    <h3>Schlagwort</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</div>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück