WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 3 column layout question

for

From: phil smears
Date: Oct 26, 2006 11:10PM



-----Original Message-----
From: Martin Pistorius [mailto: <EMAIL REMOVED> ]
Sent: 26 October 2006 06:55
To: WebAIM Discussion List
Subject: [WebAIM] 3 column layout question

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



Provided there is a skip to main menu, skip to 2ry menu and skip to
content link I see no reason why this should be an issue.

Phil Smears
Web Consultant

Mob: +44 (0)7786 117012

<EMAIL REMOVED>
www.sdesign1.com