Sep
25
2011

CSS Layout Tricks

So the fall layout is finally up!  Believe it or not I’ve been working on the layout off and on for 2 weeks.  Back in the day I used to be able to crank out a layout in a few hours.  Now I care about doing it right, with durable code, and elements actually going where they belong.  Since rebooting my web world this is the first layout where I am 100% happy with the html/css.  The layout is 100% css driven, and it plays nice on different screen sizes and browsers.

A decade ago when CSS was beginning to reach full implementation it was said that CSS would replace tables.  That time has finally arrived, and now some table attributes aren’t as well supported.  CSS as the primary mode of setting up layouts has it’s own set of illogical rules, and strange quirks.  This layout tackles a good number of them.

This layout also does some nice play with z-index, negative margins, relative and absolute positioning, and has a very clever footer.  So let’s take a walk-through:

The HTML:

<div id="layout-table">
    <div id="main">
        <div id="cross">
            <div id="expiation-header"></div>
            <div id="nav"></div>
        </div>
        <div id="content">
        </div>
    </div>
    <div id="side"></div>
        <div id="thebody"></div>
        <div id="sidebar-container"></div>
    </div>
    <div id="footer1"></div>
</div>
<div id="footer2"></div>
   <div id="footer-container"></div>
</div>

That is the entirety of the layout html, all the rest of the magic is happening in css.

The Body and Primary Container:

body {
	background-image: url('/images/layout/fall-bg.jpg');
	background-position: center center;
	margin: 0px;
	padding: 0px;
}
#layout-table {
	width:1000px;
	background-image: url('/images/layout/fall-fauxdrop.png');
	background-position: 0 0;
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	clear: both;
}

The body tag is pretty standard, and clears the margins and padding for the page. The one trick here is the background tile was centered on the page, which made the whole page look a little cleaner and less tiled.

The layout table sets up the container for the entire layout (except the footer, but we’ll get to that!).  The layout is 1000px wide.  The margin:auto setting centers this div to the center of the page.  The background is 806px long, and contains the borders and the transparent black of the main widow.  Having the background only repeat on y creates main content box for the layout.

I put in a couple of safe measures to make sure this looks right, clear:both in case any other floating elements interfere, z-index:1 to make sure this element stays all the way back, and the background-position to ensure the background stays at 0 0.

Floating Main Container and Sidebar:

#main {
	float: left;
	width: 800px;
  	font-family: Verdana, Geneva, sans-serif;
 	color: #EFEFEF;
 	font-size:10pt;
 	margin: 0;
 	padding: 0;
 	z-index: 5;
}

#main floats left (this become more important later) with a width of 800px. I set z-index:5 to keep this above the background, but below the main body image. Technically #main should be 806, but I cut it a few pixels short to make sure the floated divs do not touch, this destroys their top-alignment.

I’m going to skip the header menu for now, as that will be it’s own post on using the position property.

#side {
	float: right;
	width: 190px;
	margin-left: 0px;
	margin-right: 0px;
 	padding:0;
	z-index: 5;
}

#side floats to the right of #main, once again I set this a few pixels shy to make sure the alignment does not get shifted.

The Negative Margin Trick:

#thebody {
	width: 250px;
	margin-left: -60px;
	height: 788px;
	background-image: url('/images/layout/fall-body.png');
	background-repeat: no-repeat;
	z-index: 6;
}

This is where things get deliciously tricky.  #thebody is 250px wide, inside of a float that cannot be larger than 200px without completely knocking off the alignment of the layout.  The trick is the negative margin.  Negative margins are allowed in CSS, and are well supported.  The page believes that #thebody only needs 190px of space, because 60px of the image are set outside of the margin.  The floats are not knocked out of place, nor is the page knocked out of flow with the use of absolute positioning.  The z-index:6 places the image on top of all other content, causing the image to spill over the rest of the layout.

Using IDs to anchor styles:

#sidebar-container just set the same width of 190px and aligns the text left.  The real value of #sidebar-container is having an anchor for fun little tricks like this:

#sidebar_container h3, #sidebar_container a {
  	text-shadow: 0 0 0.2em #000000,
                     0 0 0.2em #000000,
                     0 0 0.2em #000000,
                     0 0 0.2em #000000;
}

Which gives all the headers and links in the sidebar a slight shadow.  Even though WordPress has it’s own ids and classes to play off of, I also like to code my own containers, since I know where they are and how they will behave if I add CSS.

The Footer:

This layout has two footers.  One that plays an important functional role in making the layout flow, and the one that is actually visible.

#footer1 {
	clear: both;
	width:1000px;
	height: 1px;
	z-index:5;
}

The whole purpose of this footer is to clear the floating blocks.  Without this step #layout-table doesn’t know where it ends, which means it does not know when to start or stop tiling the background.  “clear:both” tells the page that this footer wants to be below both of the floating divs, which in turn gives layout-table a clear place to end.

If it seems like it makes no sense, it doesn’t.  The float property interrupts the flow of the page, flow is this mythical thing that I think the W3C came up with to give designers headaches.  Regardless, #footer1 tells #layout-table where the end of the div is, and it can do that because it is not a floater.

Normally the actual footer could be placed in #footer1, however I’m currently obsessed with transparent pngs, and since #footer1 has the same background as #layout-table, in fact #footer1’s whole job is to tell #layout-table how far down the background should go.  So to accomplish a footer with it’s own transparent background it had to go outside the main layout table.

#footer2 {
	clear: both;
  	background-image: url('/images/layout/fall-footer.png');
  	background-repeat: no-repeat;
  	background-position-x: 0;
  	background-position-y: 0px;
	width:1000px;
	height: 30px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -1px;
	margin-bottom: 20px;
	font-size: 8pt;
	color:#f72b20;
	z-index:5;
} 

#footer-container {
	width: 800px;
	height: 15px;
	font-size: 10pt;
	color:#f72b20;
	text-align: right;
}

Yes, #footer2 is a miniature version of #layout-table, and follows all the same rules, so it appears in line with the rest of the layout. #footer-container is essentially a mini version of #main so the footer text only appears within the area with the background.

Hopefully some of these tricks are useful, or relieve some CSS confusion.  The next article will get into #cross and the main menu for the site.

Further Reading on Rendering CSS Layouts

One thought on “CSS Layout Tricks”

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CommentLuv badge