<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Zentrierte DIVs</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#container {
width: 980px;
padding:20px 0;
margin:0 auto; /*zentriert im Body */
background: orange;
}
#eins {
width:950px;
background: rgba(0,0,0,.1);
margin:auto;
padding-top: 2px;
padding-bottom:2px;
}
.clearfix:before, .clearfix:after {
content: "020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
#zwei {
margin-left: 2px;
}
#zwei, #drei, #vier, #fuenf, #sechs {
float: left;
margin-right:66px;
/*
Berechnung des Abstands:
#eins hat 950px
- 2*2px links und rechts: 946px
- 7*100px für die DIVs: 246px Rest
Nur #zwei bis #fuenf brauchen margin-right:
246px / 4 = 62px
Allerdings soll je 2px Rand rechts + links auch noch einfließen:
Endergebnis 66px
*/
}
#eins div {
background: #ccc;
width: 100px;
height: 300px; /* sollte später gelöscht werden, Inhalte bestimmen Höhe */
position: relative; /*kann weg*/
}
div#sieben {
margin-left: 848px;
background: #aaa; /* Merke: #sieben hat keinen Float! */
}
/* Schmuck-CSS zur Nummerierung, kann weg */
#eins div:before {
display:block;
height:20px;
width:20px;
background:#fff;
color:#000;
position:absolute;
left:5px;
padding-top:10px;
line-height:12px;
margin-top:5px;
text-align:center;
-moz-border-radius:20px;
}
#zwei:before { content: "2";}
#drei:before { content: "3";}
#vier:before { content: "4";}
#fuenf:before { content: "5";}
#sechs:before { content: "6";}
#sieben:before { content: "7";}
</style>
</head>
<body>
<div id="container">
<div id="eins" class="clearfix">
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
<div id="fuenf"></div>
<div id="sechs"></div>
<div id="sieben"></div>
</div><!-- #eins Ende -->
</div><!-- #container Ende -->
</body>
</html>
Add a code snippet to your website: www.paste.org