关于CSS布局和CMS的问题

我正在与SiteFinity CMS合作。我的特殊布局是3列,100%宽(边列是固定宽度,中心是流动的)。在中间的列中,我想使用css将它分成多个“框”。我的第一次尝试是 960 Grid System . 下面是我使用的标记:

<div class="container_12">
    <div class="grid_12">
        <div class="grid_5 alpha tl">
            <p class="tlc">
                <asp:ContentPlaceHolder ID="TopLeftBox" runat="server" />
            </p>
        </div>
        <div class="grid_2">
            &nbsp;
        </div>
        <div class="grid_5 omega tr">
            <p class="trc">
                <asp:ContentPlaceHolder ID="TopRightBox" runat="server" />
            </p>
        </div>
        <div class="clear">
        </div>
        <div class="grid_5 alpha bl">
            <p class="blc">
                <asp:ContentPlaceHolder ID="BottomLeftBox" runat="server" />
            </p>
        </div>
        <div class="grid_2">
            &nbsp;
        </div>
        <div class="grid_5 omega br">
            <p class="brc">
                <asp:ContentPlaceHolder ID="BottomRightBox" runat="server" />
            </p>
        </div>
    </div>
</div>

以下是结果的屏幕截图:

但是,如果我使用附加的类标记( tl ,请 tr 等)并添加填充,这是发生的情况:

这是我用来添加填充的CSS:

.tl
{
    background-color:#EEEEEE;
    padding:5px;
}
.tr
{
    background-color:#DDDDDD;
    padding:5px;
}

我想这是因为有冲突的CSS,因为SiteFinity和960G都有自己独特的样式表。

有人能给我提供一些关于为什么会发生这种情况,以及可能如何让这两个方面很好地合作的额外见解吗?

谢谢!

编辑:

所以我添加了以下CSS:

.tl
{
    background-color:#EEEEEE;
    margin:-5px;
    padding:5px;
    margin-bottom:25px;
    margin-top:15px;
}
.tr
{
    background-color:#DDDDDD;
    margin:-5px;
    padding:5px;
    margin-bottom:25px;
    margin-top:15px;
}
/* I am almost ashamed of how ugly this CSS is */

对我来说,这就像是一个管道胶带修复。对此有什么反馈吗?