Everything is changing.
This weekend, I read a very interesting book: “Everything You Know About CSS is Wrong”. The book illustrates how, now that IE has passed the ACID 2 test, we can finally begin to build our websites the proper ways. Up until now, we’ve been forced to implement hacks to form the perfect layout – absolute positioning, precarious floats, etc. But that’s all beginning to change! I’ll show you how in twenty minutes.
CSS tables are so much easier to use that it’s worth adopting them as soon as you possibly can.
-Kevin Yank
This tutorial will show you how you’ll be building your layouts in the future. Actually, you should be using these methods right now! Rather than relying on floats and absolute positioning to build our layouts, we’ll instead focus on utilizing css tables.
Step 1: Creating A Two-Column Layout the Current Way
Knowing that IE7 and below do not recognize the CSS table properties, we first need to build our incredibly simple site the “old” way. Paste in the following code into your “index.html” file.
<body>
<div id="wrap">
<div id="header">
<h1> My Header</h1>
</div><!--end header-->
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent"> -- dummy text-- </div>
</div><!--end main-->
<div id="footer">
<h1>My Footer</h1>
</div><!--end footer -->
</div><!--end wrap-->
</body>
There isn’t too much that we need to go over. We’ve created the content for our two column layout. The navigation (#nav) will be floated to the left of the main content (#primaryContent). Let’s go ahead and add some quick styling. I’m going to use background colors (ugly ones too!) so that you can easily determine where each div begins and ends.
Step 2: Adding the CSS
/* Just resetting a few elements */
h1, ul, li {
margin: 0; padding: 0; list-style: none;
}
p {
margin: 0; padding: .5em 0;
}
/* Main content styling */
#wrap {
width: 800px;
margin: auto;
}
#header, #footer {
background: red;
}
#nav {
background: gray;
width: 150px;
float: left;
}
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
We’ve set a width to our sidebar (#nav) of 150px and have floated it to the left. Rather than floating the primaryContent section as well, it would be better to simply add a left margin that is equal to the width of our sidebar. We’ll also add a bit of padding to push the text away from the edges of the div.
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
You should end up with something similar to this:
Immediately (after the glare from those awful colors goes away) you’ll see that the gray background in the sidebar isn’t stretching to the bottom. This is because floated elements only take up as much space as is necessary.
One solution would be to hard-code a specific height, but this is a bad idea. What if the main content changes? You’ll have to go back into your CSS file to adjust the height value again. So don’t do that! Instead, the accepted solution is to create a background image and tile it vertically. This is referred to as creating faux columns” Simply move to Photoshop, create a 800×10 pixel canvas, and insert the appropriate colors. You know that the sidebar has a gray background and is 150 pixels wide, so simply use the marquee tool to the select that area, and fill it with gray. After you do the same for the awful yellow, you’ll end up with this:
Save it into the root of your solution and call it “bg.png”. We can now vertically tile this image, thus creating faux columns.
#main {
background: url(../bg.png) repeat-y;
}
Now, we’ve successfully created the illusion of equal columns.
Step 3: The New Way
So that wasn’t all together too difficult! But it still required too much time to create something as simple as a two column layout. We even had to go into Photoshop to complete the look! This time, let’s recreate the site using CSS tables. Don’t worry, very little needs to change!
Keep reminding yourself, IE7 and below don’t recognize CSS tables. So, at least for now, we still need to use the method that we performed above. Create a new stylesheet and call it “ie.css”. Then copy and paste all of the CSS that we’ve written into this file. Now don’t delete it from “default.css”. We’ll simply remove a few styles. We won’t be implementing any hacks or floats to create our columns this time.
Remove the following styles from your “default.css” stylesheet.
/* Because we'll be using a "table" layout, we won't need to tile a background image! */
#main {
background: url(../bg.png) repeat-y;
}
/* No floats! */
#nav {
float: left;
}
/* No floats = no left margin. */
#primaryContent {
margin-left: 150px;
}
Implementing the CSS Tables
Now that you’ve removed the unnecessary styles, let’s add some new ones! First, we need to create two columns within our “main” div: one for the navigation, and the other for the primary content. Let’s set the display type of #main to be a table.
#main {
display: table;
}
Next, we should declare the #nav and #primaryContent elements to be table cells.
#nav, #primiaryContent {
display: table-cell;
}
Believe it or not, that’s all that we need to do to create our column layout. We already set the width of the navigation to be 150px wide. The primaryContent div will simply fill the remaining space. Here is a snapshot of our layout using CSS tables.
It looks exactly the same! But we didn’t use any floats or absolute positioning! However, as I said before, if we now view our site in IE, we’ll see.
Though IE8 will display the site correctly, IE7 and below will not. To compensate, we need to include a conditional stylesheet. (That’s why we saved the CSS from our original layout and placed it into “ie.css”).
<!--[if lte IE 7]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Now, all is well! Modern browsers will render the site using CSS tables, and IE will use the traditional float method.
The True Power
The true power comes into play when we make modifications. For example, let’s imagine that, down the road, we decide to add a third column to our site. We can accomplish this in about thirty seconds.
Step 1: Add the Additional Markup
After the closing tag on the primaryContent div, add your new column.
.... </div><!--end primaryContent--> <div id="secondaryContent"> -- dummy text -- </div> ...
Step 2: CSS
Access your stylesheet and set the display property of secondaryContent to “table-cell”. You’ll also need to determine how wide it should be. In this case, I chose 90px.
#secondaryContent {
width: 90px;
display: table-cell;
background: orange;
}
That’s it. No floats, no zeroing out margins, no browser inconsistencies.
You should start using this method today! The IE devs finally listened and gave us the tools that we need to build sites the way we want to build them. So, we must utilize these tools – even if it requires a bit more work for a couple of years. If you start today, you’ll be ahead of the pack!
Everything You Know About CSS is Wrong
If you’d like to learn more about css tables, and other CSS 3 tricks, I highly recommend that you purchase Rachel and Kevin’s book. It can be read in a day.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: Everything You Know About CSS Is Wrong! |