Webdesign 101 demoside

CSS layout

2-spaltet layout med flydende bredder

Dette eksempel er identisk med eksempel 5, bortset fra at indholdets samlede bredde er 90 procent af browservinduets bredde, og de to spalter udgør henholdsvis 67 og 30 procent af denne bredde.

div#side {
  width:90%;
  max-width:50em;}
div#indhold {
  width:67%;
  float:left;
  border-right:1px solid #257;
  padding-right:2%;}
div#menucol {
  width:30%;
  float:right;
  padding-top:1.5em;}
.clb {clear:both;}

Denne eksempelside er lavet ud fra eksempel 5. Bemærk dog, at jeg her viser, hvor let det er at ændre layout-typen fra elastisk – baseret på em-bredder – til flydende, baseret på procentvise bredder.

Selv om det ikke er noget, jeg vil anbefale, er det selvfølgelig lige så let at ændre til pixel-bredder.

Flydende layout, fikseret menubredde

Derimod kommer vi i vanskeligheder, hvis vi ønsker elastisk eller flydende bredde på websiden og en fikseret bredde på menuspalten. De vanskeligheder kan overvindes. Hvordan viser jeg i eksemplerne xxx og følgende.

8. august 2007