Links

#links { 
position: absolute; 
left: 2%; 
width: 20%; 
top: 150px; 
background-color: #D5D5D5;
}

This work is licensed under a
Creative Commons License.

Mittelinks

#mittelinks { 
position: absolute; 
left: 23%; 
width: 40%; 
top: 150px; 
background-color: #ffffff;
}

Kopfrechnen

Bei diesem Beispiel muss man ein wenig Kopfrechnen. Die Summe der Breiten ergibt 98%. Der Abstand vom body-Rand zur ersten Box, plus ihre Breite plus den Abstand ergibt die left-position der nächsten Box. (alles in %).

Overflow

Mit overflow kann bestimmt werden, wie übergroße innere Elemente organisiert werden. Siehe auch Overflow

Mitterechts

#mitterechts { 
position: absolute; 
left: 64%; 
width: 17%; 
top: 150px; 
background-color: #B1B1B1;
overflow: auto;
}

Padding und Border

Padding und Border werden allen Elementen in einer Funktion mitgegeben.

#rechts, #mitterechts,
#mittelinks, #links { 
border: 1px solid #564b47;
padding:20px;
} 

Rechts

#rechts { 
position: absolute; 
left: 82%; 
width: 17%; 
top: 150px; 
background-color: #999;
}

Open Code

Code abschreiben sehr erwünscht! (o_.)/

weitere Beispiele und viele Links findet ihr auch auf INTENSIVSTATION.CH