HTML and CSS —

Complex Layouts

Now the task before you is to begin combining techniques to come out with more advanced layouts. A good example is a fixed, centered design with three columns. If you're thinking you'd mix the positioning technique for centered, fixed designs with floats for the columns, go to the head of the class! Example 13-7 shows how.

Example 13-7. Complex layout with centering, positioning, and floats
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#container {position: absolute; left: 50%; margin-left: -300px; width: 600px; margin-top:
 10px;}
#masthead {width: 600px;}
#nav {float: left; width: 150px;}
#content {float: left; width: 290px; margin-right: 5px; margin-left: 5px;}
#sidebar {float: right; width: 140px; margin-right: 10px;}
#footer {clear: both; width: 600px;}
</style>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Readings from Edgar Allen Poe</h1>
</div>
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="poe3.html">Forward</a></li>
<li><a href="poe1.html">Back</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my
 own. Observing my partiality for domestic pets, she lost no opportunity of procuring those
 of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish
, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://vig.prenhall.com/">remarkably</a> large and beautiful
 animal, entirely black, and sagacious to an astonishing degree. In speaking of his
 intelligence, my wife, who at heart was not a little tinctured with superstition, made
 frequent allusion to the ancient popular notion, which regarded all black cats as witches
 in disguise. Not that she was ever serious upon this point - and I mention the matter at
 all for no better reason than that it happens, just now, to be remembered.</p>
<p>Pluto - this was the cat's name - was my <a href="http://vig.prenhall.com/">favorite</a>
 pet and playmate. I alone fed him, and he attended me wherever I went about the house. It
 was even with difficulty that I could prevent him from following me through the streets.</p>
</div>
<div id="sidebar">
<h2>poe trivia</h2>
<p> Best known for his poems and short fiction, Edgar Allan Poe, born in Boston, Jan. 19,
 1809, died  Oct. 7, 1849 in Baltimore, deserves more credit than any other writer for the
 transformation of the short story from anecdote to art.</p>
<p>He virtually created the detective story and perfected the psychological thriller. He
 also produced some of the most influential literary criticism of his time -- important
 theoretical statements on poetry and the short story -- and has had a worldwide influence
 on literature.</p>
</div>
<div id="footer">
<p class="footertext">All text content is in the public domain. Images &copy; 2004</p>
</div>
</div>
</body>
</html>

I've got a couple of things to point out: First, you'll see how I've used embedded style to demonstrate the fundamental layout technique, and linked a style sheet to handle my other styles. Next, I've included all the divs within the main container div. This enables me to center the float-based design (see Figure 13-10).

Figure 13-10. Complex CSS layout.

Repeat After Me…

Remember, I said it might take a little time to grasp all the layout concepts shared here. That's because there's a lot of technical information to grasp hold of, and the only way it's going to take firm grasp is for you to get your hands very dirty with the code.

At this point, I recommend downloading all the samples on the site and playing with them. Make mistakesgo ahead! It's an important part of discovery. What's more, there's nothing like that moment when you solve a problem that's been nagging at you for days.

No matter what your interest is in HTML and CSS, I hope this tutorial has helped you grasp how today's web designers and developers are approaching the increasingly complex field. I've worked to point out helpful tips and tricks along the way, but I heartily encourage you to visit the many sites I've mentioned and dig in deeper.

If you find yourself solving CSS problems in your sleep, you'll know that you're really starting to think like a web designer.