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

RE: FAQ - two columns using CSS

From: Charles McCathieNevile <charles@w3.org>
Date: Fri, 15 Feb 2002 10:06:27 -0500 (EST)
To: "SHARPE, Ian" <Ian.SHARPE@cambridge.sema.slb.com>
cc: "WAI (E-mail)" <w3c-wai-ig@w3.org>
Message-ID: <Pine.LNX.4.30.0202151002070.16281-100000@tux.w3.org>
If there are no bugs in the browser, then the answer is yes. Of course before
using this in the real world it would be worthwhile finding out what browsers
it works on, which means making a complete and valid test case if there isn't
one already in the CSS test suite...

searches... http://www.w3.org/Style/CSS/Test/CSS1/current/index.html

... not yet. Maybe I should submit a real version of this as a test case.

Cheers

Charles

On Fri, 15 Feb 2002, SHARPE, Ian wrote:

  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
  problems?

  Cheers
  Ian

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

  <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 10:06:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:00 GMT