Re: Example of Stylesheet Layout, Anyone?

----- Original Message -----
From: "Patrick Burke" <burke@ucla.edu>
To: <w3c-wai-ig@w3.org>
Sent: Tuesday, June 20, 2000 8:29 PM
Subject: Example of Stylesheet Layout, Anyone?

| If anyone has an example handy of a stylesheet used for indentation or
| multi-column layout, etc., could you please point me to it? Ideally
| where I can examine the css along with the result.

Multi-column layout isn't very difficult using style sheets. You can see
a simple example at <URL: http://home.no.net/huftis/gratismusikk/ >
(this works in (at least) IE, Opera and Mozilla). This page also works
very well when the browser don't support style sheets (e.g. Lynx).

When you're using CSS to create a multi-column layout, please note that
IE (5) has a bug. The 'width' property should set the width of the
'content' (and padding, border and margin should be added to this). IE
thinks 'width' sets the width of the margin box
(content+padding+border+margin). An example:

div#column1 { float: left; width: 50%; padding: 1em; margin: 1em;
border: 0.2em solid red; }
div#column2 { float: right; width: 50%; padding: 1em; margin: 1em;
border: 0.2em solid red; }

In IE, each column would occupy 50 % of the available width, but in
conforming browsers (i.e. browsers that support CSS *correctly* -- like
Opera 3/4, Konqueror or Mozilla 5/Netscape 6), each column will occupy
much more than 50 %, causing horizontal scroll bars.

The solution is the put each column in an extra box:

<div id="container1">
<div id="column1">
...
</div>
</div>

<div id="container2">
<div id="column2">
...
</div>
</div>

And use a style sheet similar to this:

div#container1 {width: 50%; float: left; }
div#container2 {width: 50%; float: right; }
div#column1 { padding: 1em; margin: 1em; border: 0.2em solid red; }
div#column2 { padding: 1em; margin: 1em; border: 0.2em solid red; }

-- 
Karl Ove Hufthammer

Received on Tuesday, 20 June 2000 18:00:45 UTC