WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Trying to avoid using tables

for

From: Kilcommons,Cath
Date: Aug 27, 2002 11:23AM

Hi Glenda,

Here is some code that was given to me a couple years ago by Nate Lowell at U of Northern Colorado for generating columns. You can use it as a general guideline and substitute in your own values.

Best Regards,
Cath

Cath Stager- Kilcommons
Assistive Technology Support and
Web Accessibility Coordinator
Assistive Technology Resource Center
<http://www.colostate.edu/Depts/ATRC>;
Colorado State University
970-491-6258
<EMAIL REMOVED>




Columns laid out with CSS  style here is used within the HTML, not linked to a separate style page
<HTML>
<HEAD>
</HEAD>
<STYLE
TYPE="text/css">
.center {position: absolute; top:120px; left: 150px; width:240px; height:100px; padding:10px;}
.right { position: absolute; top: 120px; left: 400px; width: 240px; height: 100px; padding:10px;}
.bottom { position: absolute; top: 320px; left: 250px; height: 100px;} width: 600px;
</STYLE>
<BODY>
<DIV CLASS="center">
<P>
<STRONG> Creating CSS Columns </STRONG> <BR><BR> This is some text that would appear in the left column. When CSS is disabled this text would spread across the page and appear before the text that appears to the right when CSS is enabled.
</P>
</DIV>
<DIV CLASS="right">
<P> <BR><BR> This is some text that would appear in the right column. When CSS is disabled this text would spread across the page and appear after the text that appears to the left when CSS is enabled<BR><BR>
</P>
</DIV>
<DIV CLASS="bottom">
<P>
<A HREF="home.HTML">Home</A> |<A HREF="contact.HTML">Contact</A>|<A HREF="news.HTML">News</A>| <A HREF="resources.HTML">Resources
</A>
</P>
</DIV>
</BODY>
</HTML>