RE: FAQ - two columns using CSS

<style>
.main { float:right ; width:75%;background-color:  yellow}
.nav { background-color: blue;width:100% }
</style>
<body>
seems to give more the effect that would be wanted...although this gives a
small white gap in IE6

Harry Woodrow

-----Original Message-----
From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org]On
Behalf Of Seth Rothberg
Sent: Friday, 15 February 2002 11:39 PM
To: w3c-wai-ig@w3.org
Subject: Re: FAQ - two columns using CSS


Charles,

You're aware, of course, that in your example in visual browsers the nav
class' gold background will flow underneath the right-floated main?

Seth

On Friday 15 February 2002 08:24 am, Charles McCathieNevile wrote:
> 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

---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.320 / Virus Database: 179 - Release Date: 30/01/2002

---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.320 / Virus Database: 179 - Release Date: 30/01/2002

Received on Friday, 15 February 2002 11:08:48 UTC