Div to replace table

Report · Dec 12, 2006

Got the following idea from an article in Web Builder magazine. I thought it might be a way to eliminate tables in favor of div's. The bottom paragraph wraps around the right column. How do I get the text to drop below the columns?

Herman

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0px; padding: 0px; font: small Verdana; }
#ltcolumn { float: left; width: 150px; border: 1px solid; }
#centercolumn { float: left; width: 150px; border: 1px solid; }
#rtcolumn { float: left; width: 150px; border: 1px solid; }
</style>
</head>
<body>
<p>Ut enim ad minim veniam, duis aute irure dolor ut aliquip ex ea commodo consequat. Quis nostrud exercitation excepteur sint occaecat velit esse cillum dolore. Mollit anim id est laborum.
<ul id="ltcolumn">
<h3>Left Column </h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<ul id="centercolumn">
<h3>Center Column </h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<ul id="rtcolumn">
<h3>Right Column</h3>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
<p>Ut enim ad minim veniam, ut labore et dolore magna aliqua. In reprehenderit in voluptate consectetur adipisicing elit, ullamco laboris nisi. Cupidatat non proident, sunt in culpa lorem ipsum dolor sit amet. Quis nostrud exercitation mollit anim id est laborum.</p>
</body></html>

Report · Dec 13, 2006

http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"cycler" <webforumsuser@macromedia.com> wrote in message
news:elo9o3$t5o$1@forums.macromedia.com...
> Got the following idea from an article in Web Builder magazine. I thought
> it
> might be a way to eliminate tables in favor of div's. The bottom paragraph
> wraps around the right column. How do I get the text to drop below the
> columns?
>
> Herman
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns=" http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> body { margin: 0px; padding: 0px; font: small Verdana; }
> #ltcolumn { float: left; width: 150px; border: 1px solid; }
> #centercolumn { float: left; width: 150px; border: 1px solid; }
> #rtcolumn { float: left; width: 150px; border: 1px solid; }
> </style>
> </head>
> <body>
> <p>Ut enim ad minim veniam, duis aute irure dolor ut aliquip ex ea commodo
> consequat. Quis nostrud exercitation excepteur sint occaecat velit esse
> cillum
> dolore. Mollit anim id est laborum.
> <ul id="ltcolumn">
> <h3>Left Column </h3>
>

Line one</li>
>
Line two</li>
>
Line three</li>

> <ul id="centercolumn">
> <h3>Center Column </h3>
>

Line one</li>
>
Line two</li>
>
Line three</li>

> <ul id="rtcolumn">
> <h3>Right Column</h3>
>

Line one</li>
>
Line two</li>
>
Line three</li>

> <p>Ut enim ad minim veniam, ut labore et dolore magna aliqua. In
> reprehenderit
> in voluptate consectetur adipisicing elit, ullamco laboris nisi. Cupidatat
> non
> proident, sunt in culpa lorem ipsum dolor sit amet. Quis nostrud
> exercitation
> mollit anim id est laborum.</p>
> </body></html>
>

Div to replace table

Photos