links

#links { 
position: absolute; 
left: 2%; 
width: 19%; 
top: 106px; 

background-color: #ffffff;  
}

Warnhinweis

Diese Seiten benutzen bestimmte CSS-Deffinitionen, die von älteren Browsern nicht dargestellt werden können.
«= mehr TEMPLATES

This work is licensed under a Creative Commons License.

mittelinks

#mittelinks { 
position: absolute; 
left: 22%; 
width: 28%; 
top: 106px; 
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 %).

Wenn Du nun also unterschiedlich breite Boxen oder mehr Abstand möchtest, brauchst Du diese Werte nur gegeneinander zu verschieben.

Code abschreiben ist sehr erwünscht!

Versuche das auch mit 2 oder 3 Spalten

mitterechts

#mitterechts { 
position: absolute; 
left: 51%; 
width: 28%; 
top: 106px; 
background-color: #ffffff;
overflow: auto;
}

box border

Box Border und Abstände werden in einer Zeile mitgegeben

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

schrift deffinieren

Die Abstände vom Box-Rand zum Text werden über padding gersteuert. Sie werden dem p oder dem h1 tag mitgegeben.

p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;

}

rechts

#rechts { 
position: absolute; 
left: 80%; 
width: 18%; 
top: 106px; 
background-color: #ffffff;
}

open code

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

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

CSS - KURS bietet die
EB ZUERICH an.