Mulig jeg tar feil, men jeg tror ikke min-height er helt browser-idiotsikkert. Jeg kan i alle fall huske å ha hatt trøbbel med det i IE6. Men hvis du bare skal ha en layout med tre kolonner og statisk bredde, så er det den enkleste sak i verden å ordne på sikkert vis. Det eneste du trenger er flere "wrappere". Her et eksempel:
HTML-kode
body {
font-family: verdana;
font-size: 12px;
}
div#wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
border: 1px solid #000;
padding: 5px;
}
div#head {
border: 1px solid #0f0;
padding: 5px;
}
div#left_wrap {
float: left;
width: 150px;
border: 1px solid #f00;
padding: 5px;
}
div#center_wrap {
float: left;
width: 450px;
border: 1px solid #00f;
padding: 5px;
}
div#right_wrap {
float: right;
width: 150px;
border: 1px solid #f00;
padding: 5px;
font-family: times new roman;
font-size: 16px;
}
div#foot {
clear: both;
border: 1px solid #0f0;
padding: 5px;
}
div.liten_dings {
border: 1px solid #000;
padding: 3px;
}
Du kan bruke dette oppsettet for å se hvordan div-ene vil oppføre seg:
HTML-kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Enda et mafiaspill</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="stilark.css" />
</head>
<body>
<div id="wrap">
<div id="head">
Århundrets on-line spill!
</div>
<div id="left_wrap">
Ho-hved menu;;<br />
- Liste<br />
- Med<br />
- Dotter<br />
- Foran
<div class="liten_dings">
Mer tekst
</div>
</div>
<div id="center_wrap">
Lite innhold
<div class="liten_dings">
Samme klasse funker her også!
</div>
</div>
<div id="right_wrap">
Stygg font
<div class="liten_dings">
D og B er ikke samme bokstav.
</div>
<div class="liten_dings">
Denne boksen vil ikke snike seg lengre mot venstre uansett hvor lite innhold du har der.
</div>
</div>
<div id="foot">
Copyright, copyleft, alle rettttigheter reservert på engelsk to tusen ganger - ikke kopier - ikke stjel - ikke tenk på det - (C) (R) (L) (:-) (Selv om PHP er serverside og er teknisk umulig å stjele uansett...)<br /><br />
Copyright, copyleft, alle rettttigheter reservert på engelsk to tusen ganger - ikke kopier - ikke stjel - ikke tenk på det - (C) (R) (L) (:-) (Selv om PHP er serverside og er teknisk umulig å stjele uansett...)
</div>
</div>
</body>
</html>
Lagre det nederste som en HTML-fil og det øverste som "stilark.css" i samme mappe.
Her bruker jeg "float: right" for å holde høyre kolonne alignet med headeren. Dette gir deg en et lite mellomrom mellom denne og midterste kolonne, som kan være kjekt fordi ulike nettlesere vil operere med litt ulik størrelse på innholdet. Dessuten ser det litt finere ut hvis teksten brytes litt før den når kanten. Rammene er som de er bare for å vise hvor grensene går, tanken var å ikke ha ramme på noen andre ting enn #wrap og "liten_dings, som vil gi ca. samme resultat som skjermbildet du viser (med noen justeringer på padding, margin og farger).
