Mehrfach zentrierte schwebende Divs in einem flüssigen Layout
Ich habe eine Idee für ein Layout, das ich verwenden möchte, aber ich kann es nicht richtig zum Laufen bringen. Ich hoffe, dass hier jemand helfen kann, da ich stundenlang gesucht habe.
Das Layout ist so.
One Wrapper Div beherbergt 6 Kind Divs. Diese untergeordneten Divs müssen auf @ zentriert seiALL mal unabhängig von der Größe des Wrappers div.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
Das Problem ist, wenn der Browser verkleinert wird und ein Kästchen auf die Linie unter dem Kästchen geklopft wird, das links aufleuchtet, während ich möchte, dass sie immer zentriert sind. Ist das mit reinem CSS möglich oder muss ich eine jquery verwenden?