Align left en bottom marge

[damnsharp]

Goedemiddag,
Bij een test site als ik bij een plaatje wat aan de onderkant van een pagina een class align-left geef dan gaat het plaatje langer dan de div waar plaatje in staat.
Hoe kan ik dat oplossen? Ik dacht aan een min-height op de div maar dat werkt ook niet goed.
Thanks!

De .align-left klasse is:
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}

Ik vermoed dat het in de float:left zit maar hoe ik het moet oplossen zie ik niet.

Linkje: weblink naar testsite

 

[bron]

Dit effect heb je bij floated elementen.Op te lossen door dit op de parent te zetten:
div:before, div:after {display: table; content: " ";}
div:after {clear: both;}

Het is netter hier een class van te maken.

.clearfix:before, .clearfix:after {display: table; content: " ";}
.clearfix:after {clear: both;}

Deze class zet je op de parent div.

Suc6.

 

[damnsharp]

yes!

Jeetje @bron, het werkt! Thanks. :thumb:
Ik wist dat het met de float te maken moest hebben.
Maar... kan je me nog wat uitleggen, ik dat je met clear:both de float eraf haalt. Maar jij doet meer, before, after, table, content. Daar duizelt het me.

 

[bron]

De class clearfix is een fix die onder deze naam veel is te vinden op internet. Soms wordt de class afgekort tot cf. De oplossingen die je op internet vindt verschillen vaak in hun css. Wat ze doen:

display: table; Je maakt hiermee een dummy tabelcel.
content=" "; voor Opera bug.
:before deel vookomt top-margin collapse.
:after deel wordt gebruikt voor clearing de float's.

De bovenstaande clearfix heb ik overgenomen uit Twitter Bootstrap maar je vindt 'm ook bijvoorbeeld op http://nicolasgallagher.com/micro-clearfix-hack/

Suc6.

 

[damnsharp]

Dank je Bron voor de uitleg. :thumb: