CSS Inline-Blocks, remove space beneath each element - html

Question

I have a website where I am trying to have a series of blocks next to each other and below each other. Currently the blocks are inline, I'd like to stop that and have stacking blocks both next to each other and on top of each other.
The website and page in question: http://cityofguilds.com/profile.php
My CSS:
.profile_containers {
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-bottom: 5px;
width: 48%;
padding: 5px;
border: 1px solid #222;
}
And the HTML:
<div class="profile_containers">
<h2>User Info</h2>
Text Here
</div>
<div class="profile_containers">
<h2>About Me</h2>
Text Here
</div>
<div class="profile_containers">
<h2>Badges</h2>
Text Here
</div>
<div class="clear"></div>
Thanks guys

Answer 1

I would recommend having two eight columns next to each other..
HTML
<div class="container">
<div class="eight columns">
<div class="profile_containers">
<h2>User Info</h2>
<strong>Name:</strong> Ben<br>
<strong>Level:</strong> 1<br>
<strong>Gender:</strong> Male<br>
<strong>Country:</strong> United Kingdom<br>
<strong>Started Playing:</strong> 21st July 2013<br>
<strong>Interests:</strong> Programming, Magic: The Gathering and gaming.<br>
<strong>Guild:</strong> Shinkaku
</div>
<div class="profile_containers">
<h2>Badges</h2>
Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff...
</div>
</div>
<div class="eight columns">
<div class="profile_containers">
<h2>About Me</h2>
Maecenas tincidunt fermentum nisi, sed convallis sapien aliquet a. Proin venenatis pharetra nisi, sit amet ultricies nibh hendrerit in. Donec et metus augue. Praesent fringilla justo non eros accumsan, venenatis posuere justo aliquet. Nullam et tortor fermentum, sollicitudin augue eget, ornare augue. Sed interdum imperdiet ullamcorper. Proin nec mattis velit. Donec sed augue nec mauris commodo lacinia sit amet ac purus. Maecenas faucibus bibendum nisi sit amet fringilla. Donec vel urna nec massa molestie tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut at euismod neque. In venenatis, augue lobortis bibendum pretium, velit est ornare nunc, a blandit lectus velit eu tortor. Quisque consequat odio at arcu accumsan, vel dapibus ipsum aliquam.
</div>
</div>
</div>
CSS
.profile_containers {
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #222;
}

Answer 2

getting them to fit and stack on one another snug is a little tricky to just do with CSS since your blocks are different sizes.
If you can set a height for your blocks thats fixed, then you can float them in css and they will automagically grid out for you.
so your css would look like this :
.profile_containers{
float:left;
margin: 0 5px 5px 0;
width:48%;
padding: 5px;
border: 1px solid #222;
/* consider adding box sizing to keep the integrity of your width because the padding will mess that up*/
box-sizing : border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
if this method will work but will break if the heights of your divs are different. The easiest way to get them snug as I have found is either to break them into separate columns and put your divs in columns ex
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
and use the css float:left on the columns.
Or use a javascript library like masonry to manage the positioning for you.