How do DIVs react?
In this post you will get a quick overview of the basic usage of DIVs. You can try it yourself - just change the code inside the html and css boxes. The result appears in the output box.

Interactive Demo

By default the div-tag is a block element and display: block

HTML

<div>DIV 1</div> <div>DIV 2</div> <div>DIV 3</div>

CSS

div{ background-color: #b6dedc; margin: 0.2em; }

OUTPUT:

• It occupies the full width available.
• It creates a new line before and after the element.
• Result: the three divs in the example above are arranged below each other.

---

DIVs can have a width, height, padding and margin:
NOTE: If you change the settings in the CSS-box you can see the DIV changing in the OUTPUT-box.

HTML

<div>DIV 1</div>

CSS

div{ width: 200px; height: 10px; padding: 10px; margin: 20px; background-color: #b6dedc; }

OUTPUT:

---

You can choose a background-color, center and colorize the text inside:

HTML

<div>COLORED CENTRED TEXT</div>

CSS

div{ text-align: center; color: #fff; background-color: #dd88dd; padding: 10px; }

OUTPUT:

---

You can center a DIV with margin: auto. It only works with a defined width:

HTML

<div>CENTRED DIV</div>

CSS

div{ width: 250px; background-color: #b6dedc; margin: 10px auto; }

OUTPUT:

---

You can nest a child DIV inside a parent DIV :

HTML

<div id= "parent">PARENT <div id= "child">CHILD</div> </div>

CSS

#parent{ width: 250px; border: 3px solid #b6dedc; padding: 10px; } #child{ width: 110px; background-color: #ccc; padding: 10px; }

OUTPUT:

---

You can nest DIVs and arrange the child DIVs beneath each other with display: inline-block

HTML

<div id= "parent"> <div class= "child">DISPLAY: INLINE-BLOCK</div> <div class= "child">DISPLAY: INLINE-BLOCK</div> </div>

CSS

#parent{ border: 2px solid #b6dedc; padding: 15px; } .child{ display: inline-block; width: 150px; background-color: #ccc; padding: 15px; }

OUTPUT:

---

You can arrange child DIVs beneath each other with display: inline-block and center them inside the parent DIV with text-align: center

HTML

<div id= "parent"> <div class= "child">CHILD</div> <div class= "child">CHILD</div> <div class= "child">CHILD</div> </div>

CSS

#parent{ text-align: center; border: 2px solid #b6dedc; padding: 10px; } .child{ display: inline-block; width: 80px; background-color: #ccc; padding: 8px; }

OUTPUT:

---

text-align: left

HTML

<div id= "parent"> <div class= "child">CHILD</div> <div class= "child">CHILD</div> <div class= "child">CHILD</div> </div>

CSS

#parent{ text-align: left; border: 2px solid #b6dedc; padding: 10px; } .child{ display: inline-block; width: 80px; background-color: #ccc; padding: 8px; }

OUTPUT:

---

text-align: right

HTML

<div id= "parent"> <div class= "child">CHILD</div> <div class= "child">CHILD</div> <div class= "child">CHILD</div> </div>

CSS

#parent{ text-align: right; border: 2px solid #b6dedc; padding: 10px; } .child{ display: inline-block; width: 80px; background-color: #ccc; padding: 8px; }

OUTPUT:

---

You can center the parent DIV with margin: auto and a defined width and align the child DIVs left/right/center with text-align

HTML

<div id= "parent"> <div class= "child">CHILD</div> <div class= "child">CHILD</div> <div class= "child">CHILD</div> </div>

CSS

#parent{ text-align: left; margin: auto; width: 350px; border: 2px solid #b6dedc; padding: 10px; } .child{ display: inline-block; width: 50px; background-color: #ccc; padding: 8px; }

OUTPUT:

---

Further Examples:

HTML

<div id= "parent"> <div id= "child_one"> <div class= "child_two"></div> <div class= "child_two"></div> <div class= "child_two"></div> </div> </div>

CSS

#parent{ margin: auto; width: 400px; border: 2px solid #b6dedc; padding: 10px; } #child_one{ margin: auto; width: 300px; background-color: #b6dedc; padding: 10px; } .child_two{ display: inline-block; width: 30px; background-color: #fff; padding: 12px; }

OUTPUT:

---

HTML

<div id= "parent"> <div id= "child_one"> <div class= "child_three"></div> <div class= "child_three"></div> <div class= "child_three"></div> </div> <div id= "child_two"> <div class= "child_three"></div> <div class= "child_three"></div> <div class= "child_three"></div> </div> </div>

CSS

#parent{ margin: auto; text-align: center; width: 400px; border: 2px solid #b6dedc; padding: 10px; } #child_one, #child_two{ margin: auto; width: 170px; display: inline-block; padding: 10px; } #child_one{ text-align: center; background-color: #b6dedc; } #child_two{ text-align: right; background-color: #ccc; } .child_three{ display: inline-block; width: 6px; background-color: #fff; padding: 3px; height: 20px; }

OUTPUT:

NOTE:
If you want the parent DIV to be responsive use max-width. Not sure how it works? Post is coming soon.