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

Received on Friday, 15 February 2002 10:39:28 UTC