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 {
background:#CCCCCC;
}
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
border:#999999 1px solid;
}
.clear {
clear:both;
}
-->
</style>


HTML example for a box:



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


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