I have a number of divs floated left. When browser is resized they move down or up based on how many can fit on
the line. I was wondering if there is a way to dynamically (with css) have those divs align (or have margin) in a way, that they would always fill
the entire screen space by having their marhin resize? In other words margin between them would resize while browser is resized, but as soon as another div can fit it will be added in
the line, or if minimum margin is reached and passed another div goes to next line while margins expand again. Here's an example how it is now, resize
the wondow to see he leftover space that I want to "fill"
<html>
<head>
<style>
.test {
float:left;
width: 100px;
height:100px;
background-color: grey;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
