Question about CSS layout and CMS
I am working with SiteFinity CMS. My special layout is 3 pillars with 100% width (side columns are fixed width, center is fluid). In the center column, I want to split it into multiple "boxes" using CSS. My first attempt was with the 960 Grid System . Here's the markup 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">
</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">
</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 use additional class tags ( tl
, tr
etc.) and add padding, this happens:
Here's the CSS I used to add the padding:
.tl
{
background-color:#EEEEEE;
padding:5px;
}
.tr
{
background-color:#DDDDDD;
padding:5px;
}
I'm guessing this is due to conflicting CSS as both SiteFinity and 960gs have their own stylesheets.
Can anyone give me more information on why this is happening, and perhaps how to get the two to work together?
Thank!
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 it looks like patching a duct tape. Any feedback on this?
source to share
Your name layout is called the Holy Grail CSS. There's a great article on the list. http://www.alistapart.com/articles/holygrail
It's also good. http://matthewjamestaylor.com/blog/perfect-3-column.htm
If you think the css in sitefinity is causing the problem, go to "reset.css" from the yui-grid and add it just before your custom css. It resets each css element back to its standard default. (IE, Firefox, Safari, etc.) All start with the same defaults.) You can use a piece of yui-grid instead of the 960 grid. Holler back if you want to see an example of yui-grid.
source to share