Dynamic margin (or simulation of margin) between left floated divs
Posted
by
BugBusterX
on Stack Overflow
See other posts from Stack Overflow
or by BugBusterX
Published on 2010-12-30T07:05:12Z
Indexed on
2010/12/30
7:53 UTC
Read the original article
Hit count: 304
css
|css-floating
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>
© Stack Overflow or respective owner
