Principeksempel 5

3 spalter med sidehoved og sidefod

Retur til foregående

Brug eventuelt linket i venstre spalte til at skjule og vise noget af teksten i den midterste spalte. Derved får du syn for sagen: at du skal være sikker på, at indholdet i den midterste spalte altid har et sådant omfang, at denne spalte er højere end de to øvrige spalter.

Stylesheet:

div#indhold {
  margin: 20px 250px; 
  border:1px solid black;
  padding:0 1em;
  background-color:#eef;}
#leftcol { 
  position:absolute;
  left:20px;
  top:130px;
  width:198px; 
  border:1px solid black;
  font-size:90%;
  padding:10px;}
#rightcol { 
  position:absolute;
  right:20px;
  top:130px;
  width:198px; 
  border:1px solid black;
  font-size:90%;
  padding:10px;}
div#banner {
  margin:10px 20px;
  background:#eef;
  height:98px;
  border:1px solid black;}
div#footer {
  margin:10px 20px;
  background:#eef;
  height:48px;
  border:1px solid black;}
div#banner h1 {
  margin:0;
  padding-top:20px;
  padding-left:10px;
  line-height:100%;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Skjul/vis tekstblok.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.