Hallo, (hatte schon geschrieben, nur vergessen meine Antwort abzuschicken :) )
ich glaube es gibt keine direkte Möglichkeit die entstandene Lücke zu füllen, wenn du nur mit diesen Divs arbeitest und floatest.
Ich hoffe ich habe es richtig verstanden: Der Div Container ganz unten links, sollte in der weißen Lücke darüber sein?
Idee 1: Unter den ersten Div ein Div setzen. Jedoch sind dann alle anderen Divs unterhalb dieser Divs. Geht also nicht!
Idee2: Float:right; statt float:left; probieren. Hat selbes Ergebnis nur umgedreht. Ist ja auch logisch, dass wenn sich das Div am vorherigen Div floaten möchte, dort aber kein Platz ist, dass es nach unten rutscht.
Die lösung ist also, die beiden ersten Divs in ein Div zu packen: Oben links und ein weiteres Div, das unter dieses soll zusammen in ein Div zu packen.
So sollte das dann aussehen (Eventuell mit anderen maßen aber mit selbem Prinzip wie bei deinem Bild):
Code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page von Marv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="width:300px;">
<div style="float:left;">
<div style="color:red;border:1px solid blue; width:98px;height:98px;">1</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;">2</div>
</div>
<div style="color:red;border:1px solid blue; width:98px;height:198px;float:left;">3</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;float:left;">4</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;float:left;">5</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;float:left;">6</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;float:left;">7</div>
<div style="color:red;border:1px solid blue; width:98px;height:98px;float:left;">8</div>
</div>
</body>
</html>
Ich hoffe, ich konnte damit helfen.
