her er et eksempel med 3 ved siden af hinanden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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;
}
div#header {
text-align: center;
background-color: #CCCCCC;
height: 60px;
margin: 0px;
padding: 1px;
}
div#wrapper {
background: url(test.gif) repeat;
margin: 0px;
padding: 0px;
width: 100%;
}
div#navcol {
padding: 10px;
float: left;
width: 25%;
}
div#main {
padding: 10px;
margin-left: 25%;
margin-right: 27%;
}
div#sidecol {
float: right;
width: 25%;
padding: 10px
}
div#foot {
border-top: solid #000 1px;
background-color: #CCCCCC;
padding: 10px;
text-align: center;
clear: both;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="navcol">
<h4>Nav Column</h4>
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectur elit</li>
<li>Sed do eiusmod tempor</li>
<li>Ut labore et dolore</li>
<li>Ut enim ad minim</li>
</ul>
</div>
<div id="sidecol">
<h4>Starboard Side Column</h4>
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectur elit</li>
<li>Sed do eiusmod tempor</li>
<li>Ut labore et dolore</li>
<li>Ut enim ad mini</li>
</ul>
</div>
<div id="main">
<h2>Main Content</h2>
<p>Ut aliquip ex ea commodo consequat. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet. Cupidatat non proident, qui officia deserunt ut enim ad minim veniam. Mollit anim id est laborum. Ut aliquip ex ea commod22o consequat.</p>
<p>Lorem ipsum dolor sit amet, velit esse cillum dolore in reprehenderit in voluptate. Consectetur adipisicing elit, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor. Quis nostrud exercitation duis aute irure dolor sed do eiusmod tempor incididunt.</p>
<p>In reprehenderit in voluptate lorem ipsum dolor sit amet, sunt in culpa. Mollit anim id est laborum. Ut labore et dolore magna aliqua. Quis nostrud exercitation duis aute irure dolor velit esse cillum dolore. Lorem ipsum dolor sit amet, cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, mollit anim id est laborum. Velit esse cillum dolore. Eu fugiat nulla pariatur. Quis nostrud exercitation lorem ipsum dolor sit amet, in reprehenderit in voluptate.</p>
</div>
</div>
<div id="foot">
<p>Footer text goes here. In reprehenderit in voluptate lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Sunt in culpa consectetur adipisicing elit, sed do eiusmod tempor incididunt. Velit esse cillum dolore mollit anim id est laborum. </p>
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
