[CSS] Zur Abwechslung: IE passt, Safari/Firefox nicht…

[scope]

So, ich könnte einen kleinen Hinweis für das Verhalten vom Safari/Firefox gebrauchen. Interessanterweise schafft der IE das problemlos.

Zunächst der HTML-Code, dann CSS und im Anhang die Screenshots.

Wieso rutschen die Absätze nach unten? Wo ist mein Fehler?

Danke schonmal, komme gerade nicht wirklich weiter..

<div class="tricolumn">
	<div class="left column">
		<h4>Project Management</h4>
		<img src="/projects/mask/library/uploads/001.png" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor accumsan odio, adipiscing aliquet lectus posuere eget.</p>
		<p>Donec turpis mi, suscipit eget imperdiet id, dictum quis nisl. Vestibulum lectus felis, fermentum eget semper ut, hendrerit vel quam.</p>
	</div>
	<div class="right column">
		<h4>Industries</h4>
		<img src="/projects/mask/library/uploads/001.png" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor accumsan odio, adipiscing aliquet lectus posuere eget.</p>
		<p>Donec turpis mi, suscipit eget imperdiet id, dictum quis nisl. Vestibulum lectus felis, fermentum eget semper ut, hendrerit vel quam.</p>
	</div>
	<div class="center column">
		<h4>Products</h4>
		<img src="/projects/mask/library/uploads/001.png" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor accumsan odio, adipiscing aliquet lectus posuere eget.</p>
		<p>Donec turpis mi, suscipit eget imperdiet id, dictum quis nisl. Vestibulum lectus felis, fermentum eget semper ut, hendrerit vel quam.</p>
	</div>
	<div style="clear:both"></div>
</div>

CSS:

DIV.tricolumn
{
	margin: 0 0 0 20px;
	padding: 10px 0;
	
}
DIV.column
{
	border: 1px solid black;
}
DIV.column H4
{
	margin-bottom: 10px;
}

DIV.column IMG
{
	margin-bottom: 10px;
}
DIV.column P
{
	width: 280px;
}
DIV.left
{
	float: left;
	width: 330px;
}
DIV.right
{
	float: right;
	width: 280px;
}

 

[_ebm_]

Ganz fit bin ich jetzt nicht, aber es sieht so aus als würden Paragrafen von den umgebenden Divs den float nicht erben. Die Paragrafen umfließen also nicht, sondern hängen sich darunter. Welches Verhalten jetzt korrekt ist, weiß ich nicht.

 

[rm -r *]

Gibt es denn einen Grund, weswegen die reihenfolge der divs "vertauscht" ist (left, right, center statt left,center, right)?

Hat wahrscheinlich nichts mit dem Fehler zu tun, aber das war mir halt aufgefallen und ich habe mich gefragt, wieso das so ist.

 

[_ebm_]

Ich hab mir das nochmal angeschaut. Du musst allen Elementen, die fließen sollen, ein Float verpassen, auch deinem Center (dass dann links fließen sollte). Achtung: Wird das Browserfenster zu schmal, zerschießt es dir dein Design. Das umgebene DIV braucht auf jedem Fall eine feste Größe.

 

[scope]

rm -r*, die DIVs waren in der Reihenfolge, weil ich die äußeren beiden jeweils links bzw. rechts gefloated habe. Daher mussten diese beiden an den Anfang. Hätte ich die rechte Spalte ans Ende gepackt, wäre sie unter der mittleren Spalte an den rechten Rand gefloated.

_ebm_, mir ist genau der Einfall, alle drei DIVs floaten zu lassen, kurz danach auch gekommen. Ich habs gerade ausprobiert und es läuft einwandfrei in allen drei Browsern. Da die drei sowieso in einem #content-DIV mit fester Breite sind, ist das kein Problem. Danke!