WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: 3 column layout question

for

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

From: Martin Pistorius
Date: Thu, Oct 26 2006 9:30AM
Subject: 3 column layout question
No previous message | Next message →

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




--
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
http://mail.csir.co.za/CSIR_eMail_Legal_Notice.html

CSIR Copyright, Terms and Conditions
http://mail.csir.co.za/CSIR_Copyright.html

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 ADDRESS 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.





From: Jon
Date: Thu, Oct 26 2006 3:30PM
Subject: Re: 3 column layout question
← Previous message | Next message →

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




From: phil smears
Date: Thu, Oct 26 2006 11:10PM
Subject: Re: 3 column layout question
← Previous message | Next message →



-----Original Message-----
From: Martin Pistorius [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
www.sdesign1.com






From: Rebecca Ballard
Date: Fri, Oct 27 2006 3:20AM
Subject: Re: 3 column layout question
← Previous message | Next message →

>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.


Rebecca

= EMAIL ADDRESS REMOVED =

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.



-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Martin Pistorius
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;
}




--
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
http://mail.csir.co.za/CSIR_eMail_Legal_Notice.html

CSIR Copyright, Terms and Conditions
http://mail.csir.co.za/CSIR_Copyright.html

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 ADDRESS 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.


Address list
messages to = EMAIL ADDRESS REMOVED =





From: phil smears
Date: Sun, Oct 29 2006 1:50AM
Subject: Re: 3 column layout question
← Previous message | Next message →





Hi Martin,

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.
Jon

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


Hi Martin,

It is a nice easy way to do things and also reasonably robust across a
variety of browsers.

There are a couple of problems, though, with the layout recommended
above.
The footer has to go in one of the columns as opposed to at the bottom
of all three.
The fixed width nature of the two side columns means horizontal
scrolling starts occurring at one font resize above default.

You don't have to use absolute positioning to put navs before content or
vice versa in source order, you can use floats. The advantage with
floats is you can get the footer below them. The only way you can do
that with absolutely positioned columns is with JavaScript. However with
JS turned off the resulting effect on layout would be so catastrophic I
wouldn't recommend that.

I'd Google faux columns and take it from there.

Phil Smears
Web Consultant

Mob: +44 (0)7786 117012

= EMAIL ADDRESS REMOVED =
www.sdesign1.com






From: Rebecca Ballard
Date: Sun, Oct 29 2006 2:20PM
Subject: Re: 3 column layout question
← Previous message | No next message

Hi Jon,

That's really useful tip. Many thanks.


Rebecca

= EMAIL ADDRESS REMOVED =

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.



-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jon
Sent: 26 October 2006 22:28
To: WebAIM Discussion List
Subject: Re: [WebAIM] 3 column layout question

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

Address list
messages to = EMAIL ADDRESS REMOVED =