Re: FAQ - two columns using CSS


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


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