CSS und Listen

[beaT360]

Guten Abend,

Leider habe ich ein kleines Problem mit CSS. Ich habe eine Klasse definiert (article) und in der Klasse möchte ich ein Liste mit Bildern anzeigen lassen.
In dem Beispiel habe ich jetzt 3x die klasse genutzt mit verschieden langen Li's. Jetzt kommt es dabei zu folgendem Fehler: Klick

CSS

.article{
	width:590px;
	margin:15px 0 0 45px;
	border-bottom:dotted 1px;
	border-bottom-color:grey;
	border:1px red solid;

	
} 

.article p{
	padding-top:10px;
	padding-bottom:15px;
	color:gray;
	font-size:14px;
	font-family:sans-serif, Geneva, Helvetica;
}

.article a{
	font-family:sans-serif, Geneva, Helvetica;
	text-decoration:none;
	font-weight:500;
	color:#519EE6;
	
}

a:hover {
	color:#B5CF74;
}

.article img{
	margin-top:15px;
}



.article li{
	float:left;
	margin-left:15px;
	margin-bottom:5px;	
}

HTML:

<div class="article">
					<div class="headline"><h1>Print</h1></div>
					<ul>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
					</ul>
				</div>
				<div class="article">
					<div class="headline"><h1>Web</h1></div>
					<ul>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
					</ul>

				</div>
				<div class="article">
					<div><h1>Sonstige</h1></div>
					<ul>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
						<li><img src="img/portfolio/test.png"/></li>
					</ul>
					
				</div>

Bin ich einfach nur bisschen blind und übersehe irgendwas? Oder liegt da ein genereller Fehler vor?

Freue mich auf eure Antworten

MfG

Jan

[Boris]

Ohne clear kein float

[beaT360]

Und wie soll ich das clear:right einsetzen? Habs bei article überall probiert aber nix funktioniert

[Boris]

http://www.andreas-kalt.de/webdesign.../float-theorie

[beaT360]

Ahhh ok clear:both hat funktioniert.

Mit den roten Rahmen sieht es so aus, als ob die h1 am Ende des DIV's stehen. Die stehen aber im HTML am Anfang. Außerdem verstehe ich nicht, wieso die erste Liste außerhalb des ersten Rahmens ist. ..

[Boris]

Hast du den Artikel wirklich gelesen und verstanden ...?