css alignment troubles with 3 column layout

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.

---

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".