Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.haupt {
margint top: 50px;
}
.b1 {
float: left;
width: 400px;
padding: 20px 0;
color: #01DF01;
border-bottom-width: 3px;
border-style: solid;
width: 50;
height: 30;
background-color: #fff;
}
.b2 {
float: both;
width: 400px;
padding: 20px 0;
color: #01DF01;
border-bottom-width: 3px;
border-style: solid;
width: 50;
height: 30;
background-color: #fff;
}
</style>
</head>
<body>
<div class="haupt">
<div class="b1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
sed diam nonumy eirmod tempor invidunt ut labore et<br>
dolore magna aliquyam erat, sed diam voluptua.<br>
At vero eos et accusam et justo duo dolores et
</div>
<div class="b2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
sed diam nonumy eirmod tempor invidunt ut labore et<br>
dolore magna aliquyam erat, sed diam voluptua.<br>
At vero eos et accusam et justo duo dolores et
</div>
</div>
</body>
</html>
3 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS
Geh erst mal Dein CSS durch.
Falsch
.haupt {
margint top: 50px;
}
Richtig
.haupt {
margin-top: 50px;
}
Und dann hier
.b1 {
float: left; /* kann raus, ist überflüssig */
width: 400px;
padding: 20px 0;
color: #01DF01;
border-bottom-width: 3px;
border-style: solid;
width: 50; /* Einheit fehlt */
height: 30; /* Einheit fehlt */
background-color: #fff;
}
.b2 {
float: both; /* den Wert 'both' gibt's nicht für float */
width: 400px;
padding: 20px 0;
color: #01DF01;
border-bottom-width: 3px;
border-style: solid;
width: 50; /* Einheit fehlt */
height: 30; /* Einheit fehlt */
background-color: #fff;
}
Wenn Du alle Fehler korrigiert hast, ergänzt Du
.b1 {
margin-bottom:50px
}
Alex
Kannst <br>s zwischen die container machen, oder auch ein <p></p>
oder Platz nach oben von 15 Pixeln oder so...
<div class="b2" margin-top: 15px;>
Kannst <br>s zwischen die container machen,
Nein. Das Element <br> wird nicht verwendet, um Abstände einzurichten. HTML ist nur für die Semantik, das Aussehen wird mit CSS geregelt.
<p></p>
auch das ist falsch.
<div class="b2" margin-top: 15px;>
Die Idee dahinter ist gut, die Ausführung ist fehlerhaft. Richtig wäre natürlich
<div class="b2" style="margin-top: 15px">
Nutzer, der sehr aktiv auf gutefrage ist
nimm einfach die floats weg , die eh nichts bingen und dann mit magin-top: 20px; arbeiten .