Her er et HTML dukument som jeg har snekret sammen i en fei nå. 4 kollonner laget i CSS
http://forum.lavkarbo.no/hp/
Ingen tabeller
Kode:
<html>
<html>
<head>
<style>
#venstre {
width: 150px;
float: left;
}
#innhold {
padding-left: 150px;
padding-right: 310px;
}
#hoyre1 {
width: 150px;
float: right;
padding-left: 5px;
padding-right: 5px;
}
#hoyre2 {
width: 150px;
float: right;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="venstre">
<h2>Meny
<ul>
<li>Velkommen
<li>Artikkel 1
<li>Artikkel 2
<li>Artikkel 3
<li>Om sidene
<li>Kontakt oss
<li>Lavkarbo.no
</ul>
</div>
<div id="hoyre1">
<h2>Kolonne 4
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<li>Aliquam egestas ipsum sit amet libero.
<li>Donec porttitor magna in enim consequat ultricies.
<li>Donec fermentum mauris vel turpis.
<li>Etiam sit amet ipsum in risus tristique semper.
<li>Cras placerat euismod eros.
<li>Sed gravida vulputate pede.
<li>Pellentesque sed massa convallis lacus hendrerit iaculis.
<li>Nunc vel eros vel felis iaculis volutpat.
<li>Praesent sollicitudin aliquam orci.
<li>Donec volutpat velit non massa.
<li>Aenean hendrerit rutrum pede.
<li>Fusce lacinia vulputate mi.
<li>Nam consequat suscipit felis.
<li>Vivamus gravida malesuada wisi.
<li>Pellentesque eget wisi ac massa egestas dignissim.
<li>Mauris blandit dolor vel tortor.
<li>Pellentesque nonummy tellus at eros.
</ol>
</div>
<div id="hoyre2">
<h2>Kolonne4
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<li>Aliquam egestas ipsum sit amet libero.
<li>Donec porttitor magna in enim consequat ultricies.
<li>Donec fermentum mauris vel turpis.
<li>Etiam sit amet ipsum in risus tristique semper.
<li>Cras placerat euismod eros.
<li>Sed gravida vulputate pede.
<li>Pellentesque sed massa convallis lacus hendrerit iaculis.
<li>Nunc vel eros vel felis iaculis volutpat.
<li>Praesent sollicitudin aliquam orci.
<li>Donec volutpat velit non massa.
<li>Aenean hendrerit rutrum pede.
<li>Fusce lacinia vulputate mi.
<li>Nam consequat suscipit felis.
<li>Vivamus gravida malesuada wisi.
<li>Pellentesque eget wisi ac massa egestas dignissim.
<li>Mauris blandit dolor vel tortor.
<li>Pellentesque nonummy tellus at eros.
</ul>
</div>
<div id="innhold">
<h1>Lorem ipsum dolor sit amet,
<p>consectetuer adipiscing elit. Sed orci. Sed sed erat vitae dolor vehicula rhoncus.
Maecenas imperdiet dignissim wisi. Etiam a ipsum non augue lacinia consectetuer. Vivamus tortor
arcu, laoreet vitae, pretium quis, hendrerit non, nisl. Maecenas fermentum imperdiet est. Sed sit
amet augue. Nam sagittis tortor quis dui. Duis id diam. Vestibulum tellus. Mauris nisl. Etiam pharetra
vestibulum mi. Maecenas lorem. Phasellus sollicitudin. Duis tristique. Nunc bibendum placerat augue.</p>
<p>Sed hendrerit interdum felis. Donec rhoncus tristique elit. Maecenas elementum rutrum magna.
Aliquam nunc ligula, lobortis non, elementum nec, interdum eu, leo. Pellentesque eget eros. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec magna risus, tempor sit amet, fringilla ut, faucibus id, quam. Donec sodales tincidunt
ante. In eros justo, pellentesque quis, malesuada quis, pulvinar ac, augue.</p>
<p>Sed facilisis mauris sit amet metus. Nunc eget tortor. Vestibulum condimentum nibh eu diam. Mauris
sapien elit, congue vel, eleifend ut, molestie ut, arcu. Nullam congue sodales orci. Curabitur lobortis
urna sed nulla. Proin lobortis. Vivamus sed erat. Maecenas diam lectus, sodales vel, ultrices id,
tempor a, est. Aliquam mollis, lectus sit amet feugiat congue, velit nunc pretium dolor, nec auctor
tellus turpis eu lectus. Donec leo purus, varius et, tincidunt vel, pharetra sed, nulla. Aenean
volutpat. Aenean laoreet eros a sem. Suspendisse blandit interdum risus. Donec neque ante, condimentum
vitae, tempor eget, pharetra imperdiet, justo. Suspendisse rhoncus dignissim eros. Nullam tincidunt,
mauris eget facilisis mattis, mauris lacus eleifend enim, at lobortis dolor ipsum nec magna.</p>
<p>Nulla fringilla nunc in turpis. Vestibulum varius, sem ac pellentesque mollis, tortor metus tempus
mauris, a luctus mi mauris quis diam. Donec vel ipsum ac diam venenatis volutpat. Donec aliquet quam
sit amet quam. Praesent ut dolor luctus erat condimentum sodales. Nulla et massa luctus dui porttitor
semper. In hac habitasse platea dictumst. Proin faucibus wisi ut dui. Nam ut mauris. Duis scelerisque
massa nec ipsum. Sed gravida porta arcu. Vestibulum commodo. Mauris porttitor consequat nibh. In felis.
Etiam hendrerit blandit tellus. Maecenas quis lacus vel nulla posuere vestibulum. Phasellus eget
lectus. Nulla facilisi. Curabitur id nunc at diam tempor bibendum.</p>
<p>Proin in risus hendrerit neque aliquam malesuada. Praesent ut pede. In pede ipsum, facilisis sit
amet, dignissim euismod, blandit ut, lorem. Aliquam eget dui quis neque tristique ullamcorper. Aenean
et nunc nec nibh consequat gravida. Donec lacus pede, pulvinar eu, iaculis eget, scelerisque quis,
diam. Mauris facilisis, purus vitae semper placerat, mi pede aliquet velit, et sagittis elit turpis
sodales est. Phasellus et augue eget ante consequat placerat. Aenean ut dui eu tortor blandit tempus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dolor.
Praesent ultricies sagittis sapien. Aenean tellus. Maecenas placerat, turpis non lacinia sodales,
lorem tellus commodo libero, nec lacinia justo odio vitae nunc. Nullam nonummy mollis mi. Maecenas
volutpat, diam eu elementum ullamcorper, libero ante ultricies metus, nec ullamcorper quam mauris et
wisi. Mauris lacus velit, nonummy at, sagittis a, dignissim nec, odio.</p>
</div>
</body>
</html>