<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">
html {
padding:0px;
margin:0px;
}
body {
font-family: Georgia, Serif;
padding: 0px 20px;
margin: 0px;
}
#menu {
position: absolute;
width: 150px;
left: 20px;
padding:20px;
margin:0px;
background: #dddddd;
border: 1px dashed #CCCCCC;
}
#menu a {
font-size:12px;
line-height:2;
}
#content {
margin-left: 205px;
overflow: auto;
background: #F5F5F5;
padding: 0px 10px 10px 10px;
}
h1 {
font-size:large;
padding-top: 10px;
}
/* ]]> */
</style>
</head>
<body>
<br />
<div id="menu">
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">Link Example</a><br>
<a href="#">And more</a>
</div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar
Send Your Message