Hallo,
für diesen kleinen Beitrag könnte es viele Überschriften geben, z.B. Divs richtig anordnen, divs positionieren, divs in divs, divs nebeneinander, etc….
Ich habe schon des öfteren divs in divs benötigt und manchmal auch nebeneinander oder untereinander und so weiter, heute wollte ich euch mal zeigen, wie einfach dies gehen kann.
Hier erstmal der CSS Code:
<style>
#wrapper {
height: 165px;
width: 500px;
border: 1px solid blue;
padding: 25px;
}
#demo_div1 {
float:left;
width: 190px;
height: 160px;
background: green;
}
#demo_div1_sub1 {
float:left;
margin: 5px;
width: 170px;
height: 70px; b
ackground: red;
}
#demo_div1_sub2 {
float:left;
margin: 5px;
width: 170px;
height: 70px;
background: black;
color: red;
}
#demo_div2 {
float:left;
width: 190px;
height: 160px;
background: red;
margin-left: 19px;
}
#demo_div2_sub1 {
float:left;
margin: 5px;
width: 170px;
height: 70px;
background: green;
}
#demo_div2_sub2 {
float:left;
margin: 5px;
width: 170px;
height: 70px;
background: black;
color: red;
}
</style>
Dann noch ein paar HTML Schnippsel:
<div id="wrapper"> <div id="demo_div1"> <div id="demo_div1_sub1">div1_sub1</div> <div id="demo_div1_sub2">div1_sub2</div> </div> <div id="demo_div2"> <div id="demo_div2_sub1">div2_sub1</div> <div id="demo_div2_sub2">div2_sub2</div> </div> </div> <p>ready...</p>
und fertig ist das ganze: Demopage
Vor allem ist das hier nützlich für Bilder, oder für kleine oder auch größere Formulare, wenn ihr eure label-tags über euren input-Feldern oder Checkboxen wollt. Natürlich muss man dann noch ein paar Größenanpassungen machen, mehr ist allerdings nicht nötig.
Have fun
Tags: css
