Using CSS to make a liquid grid of uniformly sized divs with margins

html css fluid-layout liquid-layout
Tim Mahoney picture Tim Mahoney · May 28, 2012 · Viewed 8.3k times · Source

How would you make a liquid grid of elements with uniform size and margins in CSS?

The main problem I have is the margins. I feel that the obvious solution is to set the widths and margins to a percentage and be done with it. This doesn't work because the vertical margin is a percentage of the container's width. When the container resizes horizontally, the vertical spacing is off.

I have tried two methods. One with percentage margins and one with 'em' margins. Neither of them scale correctly. What can I do?

Answer

saluce picture saluce · May 28, 2012

Are you looking for something like this? http://jsfiddle.net/LMJTu/

On the fiddle, click the button to change the size of the outer div.

Related questions

Two divs side by side - Fluid display

I am trying to place two divs side by side and using the following CSS for it. #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } The HTML is simple, two left and right div in a wrapper div. <…

Read More
How to make an element width: 100% minus padding?

I have an html input. The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid). However using width: 100%; causes the input to be 100% + 20px how can I get around this? Example

Read More
Fluid width with equally spaced DIVs

I have a fluid width container DIV. Within this I have 4 DIVs all 300px x 250px... <div id="container"> <div class="box1"> </div> <div class="box2"> </div> <div class="…

Read More