Sådan ?-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>FINE BOKSE !-) revo&trade ++oSKAr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0; padding:0;border:0;
}
html,body {
height: 100%;
}
div{padding:0;margin:0;border:0;}
#maincontainer {
position:relative;
background-color: #ccc;
height: 100%;
width: 940px;
margin:0 auto;
}
#leftDummy{width:20px;float:left;height:100%;}
#leftMainCol{
width:660px;
float:left;
/*margin-left:20px;*/
}
#rightMainCol{
width:240px;
float:left;
/*margin-right:20px;*/
}
#header_left {
background-color: red;
height: 251px;
}
#header_right {
background-color: black;
height: 267px;
}
div#leftcol {
width: 370px;
background-color: green;
float: left;
}
div#rightcol {
background-color: blue;
}
div#middlecol {
width: 250px;
background-color: yellow;
float: right;
}
p, li, td, input, textarea {
font-family: verdana, sans-serif;
font-size: 11px;
color: #333;
}
p, h1, h2, h3, h4, h5 { margin: 0; }
p.copyright {
color: #555;
margin: 7px;
text-align: center;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="leftDummy"></div>
<div id="leftMainCol">
<div id="header_left">
<h2>Forklaring:<br/>
1. rød og sort foroven sammen.<br/>
2. grøn topleft under rød<br/>
3. gul lige til højre for grøn i samme højde<br/>
4. blå under sort<br/>
5. der skal være 20px fri i hver side<br/>
6. den grå skal følge med grøn/gul/blå nedaf<br/>
6.a hvis jeg bruger float i en af de 3, så følger den grå ikke med?</h2>
</div>
<div id="leftcol">
<h1>leftcol</h1>
</div>
<div id="middlecol">
<h1>middlecol</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in ligula. Aenean nonummy. Suspendisse lobortis odio a nunc. Aliquam elit pede, accumsan et, condimentum id, mattis sed, libero. Integer fermentum urna quis pede. Curabitur ante metus, euismod at, vehicula eget, pretium a, purus. Vestibulum ut nunc. Pellentesque eget velit. Integer egestas magna sed sem. Sed aliquet lectus quis felis. Donec diam ante, dignissim ac, ultricies vel, pharetra eget, nulla. Mauris vulputate, quam ut tincidunt fringilla, dui quam scelerisque mauris, in dignissim est ligula quis elit. Aenean faucibus. Fusce eu libero eleifend leo ultricies interdum. Maecenas sagittis. Quisque metus eros, vestibulum sed, accumsan vitae, blandit non, nibh. Duis ornare rutrum mi.
Morbi ultrices nisl accumsan nulla. Nulla risus lectus, aliquet sit amet, hendrerit vitae, rutrum nec, velit. Morbi non sapien et erat sollicitudin malesuada. Donec sit amet velit porttitor purus placerat vestibulum. Sed eu velit. Donec nec wisi. Etiam elementum, felis sed interdum ullamcorper, metus pede porttitor ligula, nec egestas sem est sed metus. Maecenas mauris quam, pulvinar non, cursus non, bibendum non, est. Vivamus in felis. Duis vitae diam. Curabitur ut eros. Pellentesque sit amet mi vel ante varius viverra. Maecenas nonummy molestie orci. Ut at ante sed mi rhoncus tincidunt. Duis lobortis lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis consectetuer gravida eros. Sed pellentesque.</p>
</div>
</div>
<div id="rightMainCol">
<div id="header_right"></div>
<div id="rightcol">
<h1>rightcol</h1>
</div>
</div>
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
