Hallo zusammen,
ich befasse mich seit kurzem mit CSS und floatenden div Containern. Dazu möchte ich eine Seite mit mehreren Containern erstellen die an verschiedenen Stellen angeordnet sind.
Es klappt eigentlich auch alles soweit ganz gut, nur habe ich eine Sache die ich nicht ganz verstehe. Um alle meine Container habe ich einen Rahmen-Container erstellt um alle divs zusammenzuhaben. Klappt eigentlich auch ganz gut, nur auf einmal wenn ich die letzten div-klassen festlege, rutscht der Rahmen nach oben und die letzten div's werden nicht mehr mit eingeschlossen.
Hier mal mein Beispiel:
Hat da jemand von euch eine Idee warum das passiert? Mache ich etwas falsch? Benutze ich vielleicht zu viel float?
Bin für jede Hilfe dankbar.
Schönen Gruss
ich befasse mich seit kurzem mit CSS und floatenden div Containern. Dazu möchte ich eine Seite mit mehreren Containern erstellen die an verschiedenen Stellen angeordnet sind.
Es klappt eigentlich auch alles soweit ganz gut, nur habe ich eine Sache die ich nicht ganz verstehe. Um alle meine Container habe ich einen Rahmen-Container erstellt um alle divs zusammenzuhaben. Klappt eigentlich auch ganz gut, nur auf einmal wenn ich die letzten div-klassen festlege, rutscht der Rahmen nach oben und die letzten div's werden nicht mehr mit eingeschlossen.
Hier mal mein Beispiel:
HTML:
<head>
<title><!-- Insert your title here --></title>
<style type="text/css">
.dtwrapper {
border: solid 1px yellow;
padding: 5px;
width: 800px;
}
.dtheader { /* Main header of the product site */
border: solid 1px grey;
margin: 0px 0px 10px 0px;
}
.dtusr1 { /* General information for the product, applicable to all options */
border: solid 1px blue;
float: left;
width: 250px;
}
.dtusr1:hover { /* Mouse over effect for the general information box */
background-color: grey;
cursor: default;
}
.dtusr2 {
float: left;
border: solid 1px red;
width: 250px;
margin: 0px 0px 10px 5px;
}
.dtusr2:hover {
background-color: grey;
color: white;
cursor: default;
}
.dtusr3 {
float: left;
border: solid 1px orange;
width: 250px;
margin: 0px 0px 10px 5px;
}
.dtusr3:hover {
background-color: grey;
cursor: default;
}
.dtmainproduct { /* Box for main product of the site */
clear: both;
border: solid 1px green;
margin: 0px 0px 10px 0px;
}
.dtoptext1 { /* Optional extras for the main product if applicable */
border: solid 1px purple;
float: left;
width: 250px;
margin: 0px 0px 10px 0px;
}
.dtoptext2 {
border: solid 1px black;
float: left;
width: 250px;
margin: 0px 0px 10px 5px;
}
.dtoptext3 {
border: solid 1px green;
float: left;
width: 250px;
margin: 0px 0px 10px 5px;
}
.dtsubproduct1 { /* Box for sub products (e.g. Manual prefix or Autoamtich prefix on the page of lines & calls, main product is DT OneBill) */
border: solid 1px blue;
clear: left;
float: left;
min-width: 250px;
margin: 0px 0px 10px 0px;
}
.dtsubproduct2 {
border: solid 1px red;
float: left;
min-width: 250px;
margin: 0px 0px 10px 5px;
}
.dtsubproduct3 {
border: solid 1px black;
float: left;
min-width: 250px;
margin: 0px 0px 10px 5px;
}
</style>
</head>
<body>
<div class="dtwrapper">
<div class="dtheader">This will be the header</div>
<div class="dtusr1">dtusr1</div>
<div class="dtusr2">No call connection charge with any of our products.<br />No call connection charge with any of our products.<br />No call connection charge with any of our products.<br /></div>
<div class="dtusr3">dtusr3</div>
<div class="dtmainproduct">DT OneBill - Land line rental with Direct Telecom</div>
<div class="dtoptext1">Optional extra - Line Guard</div>
<div class="dtoptext2">Optional extra - Uk 250</div>
<div class="dtoptext3">Optional extra - De 250</div>
<div class="dtsubproduct1">Manual prefix</div>
<div class="dtsubproduct2">Automatic prefix</div>
<div class="dtsubproduct3">Semi-automatic prefix</div>
</div>
</body>Hat da jemand von euch eine Idee warum das passiert? Mache ich etwas falsch? Benutze ich vielleicht zu viel float?
Bin für jede Hilfe dankbar.
Schönen Gruss
