Re: FAQ - two columns using CSS

Interesting. You've got a total width of 175%. But it works here too.

Seth

On Friday 15 February 2002 11:08 am, Harry Woodrow wrote:
> <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 12:40:08 UTC