Question

I am working with SiteFinity CMS. My particular layout is 3-column with 100% width (side columns are fixed width, center is fluid). In the center column, I want to divide it up into multiple “boxes” using CSS. My first attempt was with 960 Grid System. Here is the markup that I used:

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

Here is a screenshot of the result:

However, if I utilize the additional class tags (tl, tr, etc) and add padding, this is what happens:

Here is the CSS I used to add the padding:

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

I imagine that this is because of conflicting CSS, since both SiteFinity and 960gs have their own distinct style sheets.

Can anyone provide me with some additional insight about why this is happening, and possibly how to get these two to work together nicely?

Thanks!

EDIT:

So I added the following 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 */

To me, this seems like a duct-tape fix. Any feedback on this?

Answer 1

The layout your after is called the CSS ‘Holy grail’.
A list apart has a great article on it. http://www.alistapart.com/articles/holygrail

This one is good too. http://matthewjamestaylor.com/blog/perfect-3-column.htm

If you think the css in sitefinity is causing a problem, go grab the ‘reset.css’ from yui-grids and add it just before your custom css.
It resets every css element back to a standard default value.
(IE, Firefox, Safari, etc… all start with the same defaults.)
You could use the yui-grids piece instead of the 960 grid system.
Holler back if you would like to see a yui-grids example.