Floting divs around a center div (For a grid) - html

Question

I want to make a div grid with a bigger center div in the middle, but the small divs won't wrap properly. What must I change? I'm trying not to use tables because of bandwith and so on.
My HTML:
<div id="main">
<!-- a lot of .icon's here -->
<div class="icon"></div>
<div class="title"></div>
<div class="icon"></div>
<!-- a lot of .icon's here -->
</div>
My CSS:
#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
height: 5em;
width: 5em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
Thanks in advance!

Answer 1

Here you go: Fiddle http://jsfiddle.net/fx62r/2/
inline-block leaves white-space between elements. I would use float: left; instead of inline block
Write elements on same line to avoid white-space. Like this:
<div class="icon"></div><div class="title"></div><div class="icon"></div>
And remove Margin:
.icon {
margin: 0 0.2em 0.2em 0; //Remove.
}
.title {
margin: 0 0.2em 0.2em 0; //Remove
}

Answer 2

#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
float:left;
height: 5em;
width: 5em;
margin: 4% 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0 0;
display: inline-block;
float:left;
}
please see this code, i hope it will helpful.