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
- 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.
You can choose a background-color, center and colorize the text inside:
You can center a DIV with
margin: auto. It only works with a
defined width:
You can nest a
child DIV inside a
parent DIV :
You can nest DIVs and arrange the
child DIVs beneath each other with
display: inline-block
You can arrange
child DIVs beneath each other with
display: inline-block and center them inside the
parent DIV with
text-align: center
text-align: left
text-align: right
You can center the
parent DIV with
margin: auto and a
defined width and align the
child DIVs left/right/center with
text-align
Further Examples:
NOTE:
If you want the parent DIV to be responsive use
max-width.
Not sure how it works? Post is coming soon.