Web DevCenter
oreilly.comSafari Books Online.Conferences.
Sign In/My Account | View Cart   
Articles Weblogs Books School Short Cuts Podcasts  
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Sites
Beautiful Code
Databases
Digital Media
Emerging Telephony
Inside Aperture
Inside Lightroom
Inside Port 25
InsideRIA.com
LinuxDevCenter.com
MacDevCenter.com
ONJava.com
ONLamp.com
Apache
BSD
MySQL
PHP
Python
Perl.com
Ruby
SysAdmin
What Is…
WindowsDevCenter.com
XML.com

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab



Web Development > Excerpts >

Introduction to CSS Layout
Pages: 1, 2, 3, 4

Below the first gray bar, you'll find the meat of the page, a two-column section with numerous links to various onsite articles and offsite resources.

Image of middle of Internet Developer page

The basic two-column layout for this section is created with three DIVs named main, left, and right. I've given some DIVs names that communicate their layout locations, which should help you correlate the HTML elements with the style rules that govern them. In real life, I would recommend giving your DIVs names that communicate their contents, not their layout locations. The markup looks something like this:



<div id="main">
  <div id="left">
    <img src="img/intro_descript.gif"
    width="200" height="99" alt="..." name="Desc" id="Desc">
    <div class="bodytitle">Related Links</div> 
    ...
    </div>
  </div>
  
  <div id="right">
    <span class="bodytitle">Web Development & Mac OS X</span>
    ...
  </div>
</div>

As you can see, the DIV main contains two child DIVs, left and right. The relevant styles look something like this:

#main {
  margin:auto;
  width:600px;
  text-align:left;
  }
  
#left {
  float:left;
  width:240px;
  background-image:url("img/bar_back.jpg");
  background-repeat:repeat-y;
  }
  
#right {
  width:330px;
  margin-left:260px;
  }

The style for the DIV main is much like the style for the DIVs of the preceding section, all of which define a 600px wide DIV centered in the middle of the page. main's child DIVs are the two columns; left has a float:right attribute, which allows right to abut it on the right side, and both DIVs have widths set so that they fit within the DIV main. right has a margin-left attribute set at 260px to ensure that it occupies the correct space within main.

To get the vertical gray bar along the left side of the page, a background image is specified for the DIV left, and the background-repeat attribute is set to repeat-y, which causes the background image to tile only vertically. And there you go.

In each of the two columns, there are various CSS layout techniques used to create different lists, boxes, and paragraphs. I'll describe a few of them. For instance, in the left div all children DIVs are given a left-margin of 25 with this rule:

#left div {
  margin-left:25px;
  }

Since all content in the left div is contained within children DIVs, all content is given a 25px left margin, allowing space for the vertical gray bar.

Image of Internet Developer links box

To create the box of links (pictured above), I nested a paragraph inside a DIV, like so:

<div id="links_div">
  <p id="links_para" class="portallink">
    <a href="...">CSS Compatibility Chart</a><br>
    <a href="...">Apple's Business Case</a><br>
    <a href="...">WebObjects</a><br>
    <a href="...">QuickTime</a><br>
    <a href="...">QuickTime Tutorials</a><br>
    <a href="...">AirPort</a><br>
    <a href="...">Apple.com</a><br>
    <a href="...">The Apple Store</a>
  </p>
</div>

I applied the following styles to those elements:

#left #links_div {
  background-image:url("img/chains.gif");
  width:201px;
  height:191px;
  margin-bottom:15px;
  margin-top:-5px;
  }
  
#left #links_div #links_para {
  padding:46px 10px 0px 40px;
  margin:0px;
  }

The border and chains are all part of the links_div background image, and the DIV's height and width are set to the exact dimension of that background image. Notice that the top-margin of the DIV has a negative value, which brings the "Related Links" and the links DIV a little closer together. The nested paragraph element is then precisely placed within the DIV by way of its border and margin attribute values.

CSS Pocket Reference

Related Reading

CSS Pocket Reference
By Eric A. Meyer

You'll notice my selectors, the part of a style rule that defines the page elements to which the rule applies, are failry verbose. Instead of the simple selector "#links_div", I use "#left #links_div". This labeling specifies that "#links_div" is a descendent, or is contained within, "#left". This practice is helpful when visually scanning my style sheets since it gives me more information about the part of my page that the style rules apply to.

The last section of the page I'll describe is the box at the top of the right-hand column:

Image of Mac OS X Web Developmet box

Here is the relevant markup:

<div id="top_box">
  <a id="top_box_image" href="http://developer.apple.com/macosx">
    <img src="img/macosxbox.jpg" height="119"
    width="100" alt="Mac OS X Box" border="0">
  </a>
  <div id="list_div">
    <ul id="top_box_list">
      <li><a href="...">Introduction</a>
      <li><a href="...">Information Architecture</a>
      <li><a href="...">Security Introduction</a>
      <li><a href="...">Perl on Mac OS X</a>
      <li><a href="...">PHP on Mac OS X</a>
      <li><a href="...">Security: Mac OS X and UNIX</a>
      <li><a href="...">Using mod_ssl</a>
      <li><a href="...">Open Source Databases</a>
      <li><a href="...">Java and Tomcat, Part I</a>
    </ul>
  </div>
  <p class="bodytext">
    <span class="bodytitle">Java and Tomcat</span><br>
    With the introduction of the Unix-based Mac OS X, server-side Java...
  </p>
</div>

The gray border of the box is created with the border attribute of the DIV which contains the rest of the content, like so:

#right #top_box {
  border:1px solid gray;
  padding:0px 12px 12px 12px;
  }

I used the padding property of the DIV to give the DIV's contents the proper amount of surrounding white space, but notice that I did not assign a value to the width property of the DIV. In general, assigning a width and either padding or margins to any box element will produce different results in different browsers. This is because of a discrepancy in IE 5.x PC's implementation of the box model, which is the cause of most of the grief developers encounter when attempting their first CSS layouts.

This issue has been expounded upon in numerous other places on the web, and there are several solutions. In this example, I solved the problem by stating the padding but not declaring a width for the DIV. The default behavior of a DIV without a specified width is to simply fill the width of its parent element. Since I defined a width (but not padding or margins) for its parent DIV (the DIV with id "right"), I got identical results in all 5x browsers, even the broken IE5.x PC. This topic and other common CSS problems are discussed in more detail here.

Now, within the DIV we have an image sitting to the left of a bulleted list, followed by a bit of text which fills the width of the DIV. The layout of the text requires no additional CSS, but the image and list use the following style rules:.

#right #top_box #top_box_image {
  display:block;
  float:left;
  margin:40px 40px 0px 0px;
  }

#right #top_box #list_div {
  margin-bottom:10px;
  float:left;
  }

#right #top_box #list_div #top_box_list {
  margin:0px;
  padding:0px;
  padding-top:10px;
  }

The CSS above uses the float attribute to create the two-column effect in same manner as was used for the two main content columns of the page. Before using the float attribute, however, I had to make the img a block element using the display attribute like so: display:block. I also wrapped the ul element in a DIV to work around discrepancies in how various browsers handle floating the ul element. Then I set float:left on BOTH the img and the DIV element (technically I should only have to do that on the img, but we do it to both to make sure all of our target browsers align our img and DIV next to each other as desired).

To get the nice aqua bullets for the list, I used the list-style-image attribute, like so:

#right #top_box #list_div #top_box_list li {
  list-style-image:url("img/aquadot.jpg");
  }

This replaces the browser's default bullets with an image of our choosing. IE/PC may not display the bullets properly, however, because of its idiosyncratic way of handling margins around the ul element; but the content does not suffer, and the layout suffers only minimally from the lack of bullet images.

Conclusion and Resources

You're now ready to start using CSS instead of tables for your web page layout needs. As you experiment with the techniques discussed in this article, you'll find that creating CSS layouts is a learned skill, and that with practice it can become an easy task. If you're looking for more resources to guide you into the CSS sunset, try these:

Eric Costello is a contract developer for hire, working out of his mysterious company Schwa. He maintains a personal site at glish.com, where he links to articles on Web standards, DHTML, CSS, XML, and other topics of interest to web developers.

Return to the JavaScript and CSS DevCenter.