Question
Div to replace table
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>
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>
AdChoices