W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2002

RE: FAQ - two columns using CSS

From: SHARPE, Ian <Ian.SHARPE@cambridge.sema.slb.com>
Date: Fri, 15 Feb 2002 14:37:00 -0000
Message-ID: <FA94B04D5981D211B86800A0C9EA2841A34A2A@cames1.sema.co.uk>
To: "WAI (E-mail)" <w3c-wai-ig@w3.org>
As you say, browsers will not all display this the same way but you've
inspired a question. Will the right hand column ALWAYS be positioned to the
right of any text in the left hand column without any overlapping text


-----Original Message-----
From: Charles McCathieNevile [mailto:charles@w3.org]
Sent: 15 February 2002 13:24
Subject: 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.

.main { float:right ; width:75%}
.nav { background-color: gold }
<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>
<div class="nav">
<p> and this stuff is the left hand column. If stylsheets don't work, it
appear after the main content</p>

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

Anything that relies on presentation control will work differently in
different browsers or with different settings. The trick is to make sure
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



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,

This email is confidential and intended solely for the use of the 
individual to whom it is addressed. Any views or opinions presented are 
solely those of the author and do not necessarily represent those of 
If you are not the intended recipient, be advised that you have received this
email in error and that any use, dissemination, forwarding, printing, or 
copying of this email is strictly prohibited.

If you have received this email in error please notify the SchlumbergerSema Helpdesk by telephone on +44 (0) 121 627 5600.
Received on Friday, 15 February 2002 09:38:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:07 UTC