Home/ Questions/Q 3609402
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:37:23+00:00

I have a number of divs floated left. When browser is resized they move

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve seen this question a few times, and the result always seems to be that css doesn’t (yet) support distribution of elements across a dynamic width. There are hacks out there, but honestly I believe the quickest way around this would be to use javascript for the positioning.

    something like this (written in the prototype library) should do what you want:

    $(document).observe('dom:loaded',function(){
    spaceSquares();
});
window.onresize = function(){spaceSquares();}
function spaceSquares(){
    // this is the minimum margin per square.
    var minMargin = 20;
    // this tells you how many squares will fit on the top row
    var topRowSquares = Math.floor(document.viewport.getWidth() / ($$('.test')[0].getWidth()+minMargin));
    // this will tell you how much space is left over
    var remainderWidth = document.viewport.getWidth() - (($$('.test')[0].getWidth()+minMargin)*topRowSquares);
    // this will tell you how much margin to put on each item
    var marginWidth = (remainderWidth / topRowSquares) + minMargin;
    // this will put the margin on the top row
    for(var i=0;i<topRowSquares;i++){
        $$('.test')[i].setStyle({'margin-left':marginWidth/2+'px','margin-right':marginWidth/2+'px'});
    }
}

    I’m sure there’s more elegant ways to do it, but essentially I’m just calculating the remaining space and dividing it between the squares. I’ve wrapped the first call to the function in an observer so that it won’t try to fire before the dom is loaded, and I’m calling it on the window.onresize event, so that if you resize the window, it will always keep the top row perfectly distributed.

    Hopefully that will get you headed in the right direction!

    • 0