WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 3 column layout question

for

From: Jon
Date: Oct 26, 2006 3:30PM

Hi Martin,

I'm not sure of the screen readers side of things but as far as putting
the content of the page higher in the code than the navigation you will
want to use absolute positioning.

I have just developed a site www.babysafetyshop.com using this method of
positioning. If the left nav has something like
position:absolute; width: 200px; top: 85px; left 5px

then your right column has something like
position: absolute; width: 250px; top: 85px; right: 5px

and the centre body area has
position: absolute; top: 85px; left: 210px; right: 260px

you can then put the code for those blocks in any order in the HTML.
Have a look at the code and the CSS for this site and you can see the
whole thing in action.

I have not done much testing for accessibility as I am still new at this
area of things. Maybe someone else on the list can give some insight as
to whether this kind of coding causes problems for JAWS etc.

Hope that help.

Regards,
Jon

----------------------------------------
Mayhem Design
Web Development
http://www.mayhemdesign.com



Martin Pistorius wrote:

>Hi there,
>
>I need to create a 3 column liquid layout; which I've done by essentially
>having 3 divs one floated left, one floated right both of them with set
>widths and then one div in the centre, without a set width.
>The basic design works well across all browsers, and no hacks were needed.
>
>However what bothers me about it, is the HTML is structured in such a way
>that the left div which will contain the main navigation, and the right div
>which will contain links to documents or other less important information,
>appear before the middle div containing the sub navigation and the main
>content.
>
>My question is, for individuals who rely on screen readers is this a
>problem?
>There will be a skip to content link on the pages.
>
>If it is a problem, then I'd really appreciate suggestion on how to create a
>3 column liquid layout that will work on all browsers, without the need for
>hacks or Javascript?
>I've looked at a variety of ways to do at and this one seems a good way to
>do it.
>
>Below I've included a simple version of the markup and CSS that will be
>used.
>
>Thanks,
>
>Martin
>
><!-- Start of site wrapper -->
><div id="siteWrapper">
>
><!-- Start of header section -->
> <div id="topBar">
> <a href="#content">Skip to main content</a> />
> </div>
>
> <div id="logo">
> <a href="index.htm"><img src="img/logo.gif" alt="logo" border="0" /></a>
> </div>
>
> <div id="breadcrumb">
> You are here: Home &gt; <a href="#">Bread crumb</a>
> </div>
><!-- End of header section -->
>
><div id="left">
>
><!-- Start of Main navigation -->
><div class="hiddenMsg">Start of main Navigation</div>
>
><ul id="mainNav">
> <li><a href="index.htm">Home</a></li>
> <li><a href="#">Link</a></li>
> <li><a href="#">Link</a></li>
></ul>
><!-- End of Main navigation -->
>
></div>
>
> <div id="right">
>
><h2>Right Box</h2>
><p>
>Right box
></p>
> </div>
>
><div id="middle">
>
><!-- Start of Sub navigation -->
><div id="SubNav"><a href="#">Sub nav 1</a> | <a href="#">Sub nav 2 </a>| <a
>href="#">Sub nav 3</a> | <a href="#">Sub nav 4</a> | <a href="#">Sub nav
>5</a> |</div>
><!-- End of Sub navigation -->
>
><h1>Main content</h1>
>
><p>
>Main content div
></p>
>
></div>
>
>
><div id="footer">footer
></div>
>
>
></div>
><!-- End of Site wrapper -->
>
></body>
></html>
>
>----------------------------------------------
>
> #left {
> float:left;
> width:150px;
> margin:1px; padding:0;
> border:solid 1px blue;
> }
>
> #middle {
> margin:0 160px;
> border:solid 1px green;
> }
>
> #right {
> float:right;
> width:150px;
> margin:0; padding:0;
> border:solid 1px red;
> }
>
>
>
>
>
>