• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 13. CSS Layouts > Complex Layouts

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

     <html xmlns="http://www.w3.org/1999/xhtml">
<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;}
<link rel="stylesheet" type="text/css" href="layout.css">
<div id="container">
<div id="masthead">
<h1>Readings from Edgar Allen Poe</h1>
<div id="nav">
<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>
<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 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 id="footer">
<p class="footertext">All text content is in the public domain. Images &copy; 




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint