float Problem

[CikoNo1]

Hallo Leute,

ich habe da ein Problem mit floaten von Boxen. Ich habe vier Boxen mit den selben Breiten, aber unterschiedlichen höhen. Zwei der Boxen sollen nebeneinander floaten, der dritte soll dann unter den, ersten rutschen. Das tut er auch aber erst ab der Unterkante der längeren Box. Hier mal eine Zeichnung wie ich es haben will: Box Modell
Und so siehts momentan aus:Momentanes Box Modell

und hier mal der CSS Code:

.box
{
	width:487px;
	float:left;
	display:inline;
	margin:0px 0px 0px 5px;
	padding:0px;
	background:url(../img/black_background.png) repeat left top;
	color:#FFFFFF;
	text-align:center;
	overflow:hidden;
}

MFG
Ural

 

[Maik]

Hi,

hierbei handelt sich im eigentlichen Sinne nicht um ein "Float-Problem", denn die Anordnung der dritten Boxen ist vollig regelkonform.

 

[CikoNo1]

Und wie könnte ich das lösen

 

[Maik]

Sollen die Boxen grundsätzlich "zweispaltig" angeordnet werden, oder nur dann, wenn das Browserfenster in der Breite verkleinert wird?

 

[CikoNo1]

ja sie sollten immer zweispaltig angeordnet werden.

Die Boxen werden von einem PHP Skript generiert, und kann nicht sagen Box1=float left, Box2=float right usw. ist ne Typo3 Extension, und diese funktionalität einbinden wäre der Horror ist nämlich ein Mega Skript.

 

[Maik]

Dann wirst du zwei Spaltenblöcke erzeugen müssen, in die die entsprechenden Boxen (ohne float-Deklaration) eingebunden werden.