When making layout for a website, it often happens so that I need to use blocks of equal width but of different height, placed in a container of variable width.

Moreover, a filter may be applied to the "list" of blocks, showing or hiding list elements via JavaScript, and the filter should neither destroy the "rows" and the layout, nor leave holes in the layout, so table-based solutions cannot be used. Here's a very simple example — a goods catalog:



Well, morfi and I decided to find a more or less universal solution that would make publishing such content much easier. It should be noted that the height of the blocks may depend, for example, on the height of the titles/descriptions (whichever used in the layout).

There are two pitfalls to be avoided: Firstly, it's the gap between the blocks. If I set simply

float:left; margin-right|bottom:50px

(I somewhat simplified the syntax), then the last element in the row will always be indented, so it will never abut on the container's border.

Here's an easy solution, which uses the float attribute:

1. Set

   float:left; margin-top|left:50px

   for the elements;


2. Wrap the elements into another container, for which a negative indent is set:

   margin-top|left:-50px

   (We call the external container, which was used initially, "wrapper", and the internal one, "container".);


3. To make the wrapper and the container compatible with IE, set the zoom:1 attribute for them; and to prevent their shrinking because of the float elements, use the

   overflow:hidden attribute;



4. To avoid having a double margin in IE, set

   display:inline

   for the blocks.

Everything seems to be fine, but if the heights of the blocks differ too much, we might get a glitch:


See the blocks three, four, and five? The green one is the wrapper, and the blue one is the container.

The situation is natural: a block draws the line (or the "row") in which it is located. This behavior is typical for

display:inline-block

To use the solution in practice, do the following:

1. Set margin as in the example above;


2. Use the universal, cross-browser setting

   display:-moz-inline-box; display:inline-block; *zoom:1; *display:inline for the blocks;



3. See that the horizontal distances are slightly higher than 50px, which we need? That's because of the spaces between inline-block;


4. To tackle the problem caused by the spaces, let's measure the width: 4px, i.e. 25 percent of 1em, which by default equals 16px. Therefore, we set

   word-spacing:-0.25em

   for the container, and

   word-spacing:normal

   for the blocks;


5. To prevent the elements being aligned along the base line in IE, we also set text-align:top for the blocks.

So far, the solution seems to be bug-free, and it's a cross-browser one. Setting text-align:center for the container causes no trouble with the Inline method (see the screenshot). Just remember to restore the text-align:left attribute for the blocks (see style.css, where it's commented out by me).

You can find a demo here: http://test.dis.dj/blocks/.

P.S. I guess the solution isn't new, but hopefully it might be of use.

P.P.S. On the screenshot, you can see a sample of the to-be online store/portal for mommies, which is being created by the Nimax studio.

Don't forget to Subscribe to our RSS feed and Follow us on Twitter - for recent updates.

Share this post if you like it