FAQ - two columns using CSS

This is something people keep asking about, so here is how I approach it, as
a fragment of HTML with a stylesheet.

<style>
.main { float:right ; width:75%}
.nav { background-color: gold }
</style>
<body>
<div class="main">
<h1>This is a demo</h1>
<p>and the main text goes here. If the style sheet works, the main text will
be floated off to the right, i.e. be in the right hand column, leaving a
column free on the left for the navigation text just like having an image
that sits on the right hand side of text.</p>
<p>etc</p>
</div>
<div class="nav">
<p> and this stuff is the left hand column. If stylsheets don't work, it will
appear after the main content</p>
</div>


Notes:
This won't help screenreaders that can't understand how to find out what is
in the HTML - users will have to provide a user stylsheet...

  .main { float:none }

There is another example of this kind of approach at
http://www.w3.org/WAI/AU/sources/templates/cmnMain

Anything that relies on presentation control will work differently in
different browsers or with different settings. The trick is to make sure that
the resulting presentation makes sense in each case, since it is impossible
to ensure that the presentation stays the same (and not helpful in all
cases).

Cheers

Charles

-- 
Charles McCathieNevile    http://www.w3.org/People/Charles  phone: +61 409 134 136
W3C Web Accessibility Initiative     http://www.w3.org/WAI    fax: +1 617 258 5999
Location: 21 Mitchell street FOOTSCRAY Vic 3011, Australia
(or W3C INRIA, Route des Lucioles, BP 93, 06902 Sophia Antipolis Cedex, France)

Received on Friday, 15 February 2002 08:24:28 UTC