I’m trying to create a table-less layout using floats, but I’m having trouble getting small objects to float on both sides of larger objects. Is this possible?
Here’s a visual of what I’m trying to do:
UPDATE: I’d like to be able to add new blue boxes and pink boxes at any time and anywhere in the document, and not have to apply custom floats to individual items…
I’ve saved the actual code on JSFiddle: http://jsfiddle.net/TuZfm/
If you prefer to see the raw code, here it is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.wrapper {
width:100px;
margin:2em auto;
}
.box {
height:10px;
width:10px;
margin:5px;
float:left;
background-color:blue;
}
.box-medium {
height:30px;
width:30px;
margin:5px;
float:left;
background-color:pink;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="box"/>
<img class="box"/>
<img class="box-medium"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
<img class="box"/>
</div>
</body>
</html>
Thanks for any help!
Here’s what I get when I try inline-block:
It’s almost perfect except for the deadspace beside the pink box… I’d like to have two rows of blue boxes beside the pink box.
Here’s the code I used when trying inline-block: http://jsfiddle.net/QCAFM/
If you want to be able to add new elements on the fly, you should consider using a javascript solution for this problem.
Here’s a good one.
http://masonry.desandro.com/