css alignment troubles with 3 column layout - css

Question

My site looks like this:
I've coloured the central info bit red, so you can see. It's too far down the page! I can't work out why.
Here's the css (well, actually scss, but you get the idea) for that section:
#searchresult {
.left {
background-color:yellow;
float:left;
margin-right:0.5em;
}
.center {
background-color:red;
#activity {
float:right;
}
}
.right {
background-color:green;
float:right;
width:145px;
margin-left: 1em;
.info, .email {
#include minimal-btn();
a {
padding: 3px 0 0 28px;
}
}
}
}
(If you haven't seen it before, scss is a cool thing that compiles down to css. It works just as you'd think it would.)
Here's the html:
<ItemTemplate>
<div id="searchresult" class="box group">
<div class="left">
<img id="imgLogo" runat="server" alt="Logo" src=""/>
</div>
<div class="right">
<asp:Panel ID="pnlEmail" runat="server">
<div class="minimal email"><asp:HyperLink ID="lnkEmail" runat="server">Email this business</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlMicrosite" runat="server">
<div class="minimal info"><asp:HyperLink ID="lnkMicrosite" runat="server">Full company info</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlRecommends" runat="server" CssClass="recommends">
<span>Recommends: <strong><asp:Literal ID="litRecommends" runat="server"></asp:Literal></strong></span>
</asp:Panel>
</div>
<div class="center">
<span id="activity">Activity: <asp:Literal ID="litCompanyActivity" runat="server"></asp:Literal></span>
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
<em><asp:Literal ID="litCompanyLocation" runat="server"></asp:Literal></em>
</div>
</div>
</ItemTemplate>
I'm pretty new to web design. Css isn't very intuitive for me, and I can't work out what is going on here. In the guide I was following This problem didn't seem to arise.

Answer 1

This is causing the problem:
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
specifically, the default margin-top on the h3.
You can remove the margin-top, if that's what you want:
h3 {
margin-top: 0
}
Or, you can set overflow: hidden on .center to prevent collapsing margins, which is the source of your "alignment problem".