E-mail List Archives
Re: 3 column layout question
From: Rebecca Ballard
Date: Oct 27, 2006 3:20AM
- Next message: phil smears: "Re: 3 column layout question"
- Previous message: phil smears: "Re: 3 column layout question"
- Next message in Thread: phil smears: "Re: 3 column layout question"
- Previous message in Thread: phil smears: "Re: 3 column layout question"
- View all messages in this Thread
>From a screen reader point of view as long as you've got skip links - to
main content, and possibly to both sets of navigation divs - users are going
to be happy.
Sign up for regular tips and tricks at www.withoutamouse.com/newsletter.
Check out my new blog at www.withoutamouse.com/blog
Thinking about Broadband? Check out www.withoutamouse.com/broadband.
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Martin Pistorius
Sent: 26 October 2006 06:55
To: WebAIM Discussion List
Subject: [WebAIM] 3 column layout question
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
My question is, for individuals who rely on screen readers is this a
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
I've looked at a variety of ways to do at and this one seems a good way to
Below I've included a simple version of the markup and CSS that will be
<!-- Start of site wrapper -->
<!-- Start of header section -->
<a href="#content">Skip to main content</a> /> </div>
<a href="index.htm"><img src="img/logo.gif" alt="logo" border="0" /></a>
You are here: Home > <a href="#">Bread crumb</a> </div>
<!-- End of header section -->
<!-- Start of Main navigation -->
<div class="hiddenMsg">Start of main Navigation</div>
<!-- End of Main navigation -->
<!-- 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
<!-- End of Sub navigation -->
Main content div
<!-- End of Site wrapper -->
border:solid 1px blue;
border:solid 1px green;
border:solid 1px red;
This message is subject to the CSIR's copyright, terms and conditions and
e-mail legal notice. Views expressed herein do not necessarily represent the
views of the CSIR.
CSIR E-mail Legal Notice
CSIR Copyright, Terms and Conditions
For electronic copies of the CSIR Copyright, Terms and Conditions and the
CSIR Legal Notice send a blank message with REQUEST LEGAL in the subject
line to <EMAIL REMOVED> .
This message has been scanned for viruses and dangerous content by
MailScanner, and is believed to be clean. MailScanner thanks Transtec
Computers for their support.
messages to <EMAIL REMOVED>