Du kan prøve noget à la:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
background: yellow;
overflow: hidden
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
font: 12px verdana;
}
td {
padding: 20px 10px;
vertical-align: top;
}
td.side {
width: 240px;
}
h1, .boks {
margin: 0 0 20px 0;
}
h1 {
padding: 10px;
text-align: center;
background: white;
border: 1px solid blue;
font-size: 30px;
}
.wrapper {
padding: 0 10px;
}
.boks {
padding: 10px;
border: 1px solid blue;
background: white;
}
.left, .right {
margin: 10px;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<table>
<tbody>
<tr>
<td class="side"><div class="boks">Venstre</div></td>
<td><h1>En tekst i midter-kolonnen</h1>
<div class="boks">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam sem dolor, mollis eu, dapibus in, varius nec, purus.<img class="right" src="
http://www.danskilderunion.dk/Chip.gif" alt="Ilder">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc libero ante, vulputate ut, mollis a, imperdiet ut, nibh.
Sed vel orci. Sed turpis. Pellentesque mattis metus at metus.
Ut aliquet nunc eu elit. Praesent libero. In in mauris.
Vivamus massa libero, lobortis ut, tempus in, interdum at, erat.
Duis sem. Nam felis.<br><br>
Cras pretium laoreet tellus. Morbi vitae nulla. Vestibulum vehicula.
Sed gravida dapibus leo. In ornare ipsum ac odio. Sed blandit augue sit amet diam.
Etiam pellentesque, leo auctor suscipit tempus, tellus mi ullamcorper nisi,
ut euismod augue nisi eu risus. Duis quis enim. Praesent ut risus.
Nullam sollicitudin magna id est. Sed porta mattis libero.
Phasellus felis.<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam sem dolor, mollis eu, dapibus in, varius nec, purus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc libero ante, vulputate ut, mollis a, imperdiet ut, nibh.
Sed vel orci. Sed turpis. Pellentesque mattis metus at metus.
Ut aliquet nunc eu elit. Praesent libero. In in mauris.
Vivamus massa libero, lobortis ut, tempus in, interdum at, erat.
Duis sem. Nam felis.
</div>
<div class="boks">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam sem dolor, mollis eu, dapibus in, varius nec, purus.<img class="left" src="
http://www.danskilderunion.dk/Chip.gif" alt="Ilder">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc libero ante, vulputate ut, mollis a, imperdiet ut, nibh.
Sed vel orci. Sed turpis. Pellentesque mattis metus at metus.
Ut aliquet nunc eu elit. Praesent libero. In in mauris.
Vivamus massa libero, lobortis ut, tempus in, interdum at, erat.
Duis sem. Nam felis.<br><br>
Cras pretium laoreet tellus. Morbi vitae nulla. Vestibulum vehicula.
Sed gravida dapibus leo. In ornare ipsum ac odio. Sed blandit augue sit amet diam.
</div></td>
<td class="side"><div class="boks">Højre</div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- men husk på, at et floated element ikke optager fysisk plads, hvad du f.eks. kan se i den nederste boks ;o)
Ny bruger
Nybegynder
Opret
Preview
