<DIV> Part I

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

CSS

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

CSS

OUTPUT:


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

CSS

OUTPUT:


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

CSS

OUTPUT:


You can nest a child DIV inside a parent DIV :
HTML

CSS

OUTPUT:


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

CSS

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

CSS

OUTPUT:


text-align: left
HTML

CSS

OUTPUT:


text-align: right
HTML

CSS

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

CSS

OUTPUT:


Further Examples:
HTML

CSS

OUTPUT:


HTML

CSS

OUTPUT:

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

Leave a Reply