SOURCE:
Basic Page Layouts Using CSS by Jeff Siarto
<!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" xml:lang="en" lang="en">
<head>
<title>Two Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#wrap {margin: 0 auto;
width: 800px;
/* Debug */
background-color:Aqua;
border:1px solid #646464;
border-style:solid;
/**/
}
#content {float: left;
width: 500px;
/* Debug */
background-color:Gray;
border:1px solid #646464;
border-style:solid;
/**/
}
#sidebar {float: right;
width: 280px;
/* Debug */
background-color:Lime;
border:1px solid #646464;
border-style:solid;
/**/
}
#footer {clear: both;
/*Debug*/
background-color:Olive;
border:1px solid #646464;
border-style:solid;
/**/
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra, quam eget euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl eget ipsum.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse viverra, quam eget euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl eget ipsum. Donec feugiat
augue. Ut feugiat. Integer euismod massa ut enim. Proin euismod
velit et risus. Donec tempor, tortor commodo tempor iaculis, elit
lorem viverra felis, vitae sollicitudin dolor felis dignissim arcu.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque
ipsum. Duis tempor.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspe ndisse viverra, quam eget euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl eget ipsum. Donec feugiat
augue. Ut feugiat. Integer euismod massa ut enim. Proin euismod velit
et risus. Donec tempor, tortor commodo tempor iaculis, elit lorem viverra felis, vitae sollicitudin dolor felis dignissim arcu. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nulla facilisi. Aenean mollis scelerisque ipsum. Duis tempor.</p>
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing
elit. Suspendisse viverra, quam eget euismod tincidunt, metus tellus
fringilla neque, ut tempus ante nisl eget
ipsum.</p>
</div>
</div>
</body>
</html>
Posts
No comments:
Post a Comment
- the first minus - Comments have to be moderated because of the spammers
- the second minus - I am very lazy at moderating comments ... hardly find time ...
- the third minus - Short links are no good for security ...
- The REAL PLUS : Any critic and positive feedback is better than none, so your comments will be published sooner or later !!!!