Hallo everyone. I'm trying to fit many small boxes in a big one. They should fit perfectly, the gaps between each small box should be optimized and everything without Javascript (later alittle for optimization).
Tho, my question regards the CSS3 Column attributes. I've tried several things but can't find any good solution. There are two problems.
- Some boxes that
overflow:hiddenshould hide are still visible and break into two pieces (marked red in the code). How can i break before the overflow starts without a manuel break? - The gaps between each column is too big and moves everything to far to the right side. How can i center the boxes within the columns so that every gap is equal?
Here's the code so far, on mozilla's css3:
<html>
<style type="text/css">
#wrapper{
width: 320px;
height: 480px;
border: 1px solid #ccc;
margin: 80px auto;
overflow: hidden;
/* here goes css3 testing */
-moz-column-count:3; /* later automatic calculation via javascript */
}
.box{
width: 96px;
height: 96px;
background: #eee;
margin: 3px;
column-break-before : always; /* doesn't seem to work */
}
</style>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" style="background: red"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
--
Thanks for the help in advance :)