Tuesday, May 8, 2012

Dynamic float layout with CSS

Let me try and explain what I want to achieve. I want X boxes with a specific width (250 px) set but dynamic height to be placed in the body. But I want them to be as compact as possible, no unnecessary empty space between them.

Now If all boxes had same width and height, this would be easy. I could for example just put float:left; on them. But the when the boxes height is dynamic, and all boxes have random height I end up with spaces between the boxes.

Let me show two examples:

This is what I want:

This is what I want

This is what I end up with:

This is what I end up with

This is my CSS:

<style type="text/css">
body {
.flowBox {
border:#999999 1px solid;
.clear {

HTML example for a box:

<div class="flowBox">
<h1>Header 0</h1>
Erat volutpat. Sed rutr...

Full source code: http://pastebin.com/UL1Nqyvm

Is there a way to achieve this with CSS? Thanks for any help or directions!

No comments:

Post a Comment