WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Complex site design using only divs

for

Number of posts in this thread: 3 (In chronological order)

From: Catherine Brys
Date: Thu, Dec 08 2005 4:20AM
Subject: Complex site design using only divs
No previous message | Next message →

Hello,

I am working on a new design for our site. I would like to use only <div>s
AND use the float attribute (no absolute or relative positioning).

Do you know any sites which have a grid layout (e.g. similar to
http://www.glasgow.gov.uk/en/Business/) and use 'floating' <div>s only?

It seems hard to obtain a grid layout with 'floating' <div>s because one
<div> 'does not know' how high/wide its neighbours are. I don't want to use
scripting.

Many thanks for your help!

Cath

Dr. Catherine M. Brys - PhD Eng
Library Web Services Administrator
- Library Web Site Accessibility and Usability Project -
Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
e: c.brys [at] lib.gla.ac.uk
t: +44 (0)141 330 6748
w: www.lib.gla.ac.uk/accessible





From: Ben Dykes
Date: Thu, Dec 08 2005 5:00AM
Subject: RE: Complex site design using only divs
← Previous message | Next message →

A google search will bring up lots of examples for this, but this might help
get you started...

http://www.ssi-developer.net/main/templates/

Hope that helps.

ben


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Catherine Brys
Sent: 08 December 2005 10:08
To: ' = EMAIL ADDRESS REMOVED = '
Subject: [WebAIM] Complex site design using only divs

Hello,

I am working on a new design for our site. I would like to use only <div>s
AND use the float attribute (no absolute or relative positioning).

Do you know any sites which have a grid layout (e.g. similar to
http://www.glasgow.gov.uk/en/Business/) and use 'floating' <div>s only?

It seems hard to obtain a grid layout with 'floating' <div>s because one
<div> 'does not know' how high/wide its neighbours are. I don't want to use
scripting.

Many thanks for your help!

Cath

Dr. Catherine M. Brys - PhD Eng
Library Web Services Administrator
- Library Web Site Accessibility and Usability Project -
Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
e: c.brys [at] lib.gla.ac.uk
t: +44 (0)141 330 6748
w: www.lib.gla.ac.uk/accessible










From: Catherine Brys
Date: Wed, Dec 14 2005 4:20AM
Subject: RE: Complex site design using only divs
← Previous message | No next message

Hello,

Thanks for the suggestions, Tim and Ben.

I think I've solved the problem I run into - I wanted to explore how far I
could go with css - try and do a complicated layout with css.

I have found that it is possible to use divs for a grid-like design
(although vertical alignment is limited): the problem I had was due to
combining set widths (in %) with padding (in px). The browsers don't seem to
like it . I analysed the code of the W3C homepage and found that they use
one div in another, the outer div has the width, the inner has the padding.
Seems to work fine.

Best regards,

Catherine

Dr. Catherine M. Brys - PhD Eng
Library Web Services Administrator
- Library Web Site Accessibility and Usability Project -
Glasgow University Library, Hillhead Street, Glasgow, G12 8QE, Scotland, UK
e: c.brys [at] lib.gla.ac.uk
t: +44 (0)141 330 6748
w: www.lib.gla.ac.uk/accessible


-----Original Message-----
From: Tim Beadle [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: 08 December 2005 10:17
To: WebAIM Discussion List
Subject: Re: [WebAIM] Complex site design using only divs


On 08/12/05, Catherine Brys < = EMAIL ADDRESS REMOVED = > wrote:
> I am working on a new design for our site. I would like to use only <div>s
> AND use the float attribute (no absolute or relative positioning).

What's wrong with positioning? It's as valid an approach as floating.

> Do you know any sites which have a grid layout (e.g. similar to
> http://www.glasgow.gov.uk/en/Business/) and use 'floating' <div>s only?

www.capgemini.com ?

> It seems hard to obtain a grid layout with 'floating' <div>s because one
> <div> 'does not know' how high/wide its neighbours are.

Indeed, which is where this blog entry by Jeffrey Zeldman may help
influence your thinking. I quote:
"Grids are used to balance the design of books, ads, posters, and
paintings. They are also often used in web design, particularly when
it is executed via HTML tables or Flash. The grid has a long and noble
history in the design of two dimensional media. But it is not the only
way to design web pages and it is certainly not the _webbiest_ way."
(emphasis his).

http://www.zeldman.com/daily/0403b.shtml#rulesbaseddesign

My recommendation would be, therefore, to ditch the grid. CSS allows
so much more, and if you're going to allow for varying font, window
and screen sizes, then grids don't really fit the bill. They work fine
for fixed molecules of ink on fixed-size pieces of paper, but not on
the web.

> I don't want to use scripting.

Again, I'd say: why not? If it's used to progressively enhance the
user experience, then it's a very valuable tool to achieve effects
like this:
http://www.themaninblue.com/experiment/ResolutionLayout/
( Blog entry: http://www.themaninblue.com/writing/perspective/2004/09/21/ )

Hope that helps!

Regards,

Tim