How to get a CSS Layout like at elkaniho.com/

Question

Hi,

This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.

And when you re-size the browser, they all re-adjust perfectly?

anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?

Answer 1

That's just a six column layout. Easily done with 6 divs:

<div id="container">
  <div class="column">one</div>
  ...
  <div class="column">six</div>
</div>

As a fluid layout:

#container { overflow: auto; }
div.column { width: 16%; float: left; }

You can of course fix the widths too.

Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.

Answer 2

There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.

Answer 3

The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.

The functions:

1. Figures out the maximum number of columns based on the body width, box width and margin
2. Sets all divs with a class of box and boxInterior to have absolute positions and set their width
3. Goes through each box and calculate the left and top positions.

I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.