<DIV> Part II

How do DIVs react?
In this post you'll get more information about the usage of DIVs. Maybe a little more advanced. You can try it yourself - just change the code inside the html and css boxes. The result appears in the output box.

Interactive Demo

CSS Float

With the css float you can push a DIV to the right or left.
By default it will move as far to the right or left as possible.
HTML

CSS

OUTPUT:


floated DIVs inside a parent DIV:
HTML

CSS

OUTPUT:


If you float DIVs after each other, they will float next to each other. If there is no more room they will move to the next line.You can see it if you change the width of #box.
HTML

CSS

OUTPUT:


By default the elements after a floated DIV flow around it while the elements before the floated DIV are not affected.
If you float a DIV to one side, a following text flows around it, to the other side.
HTML

CSS

OUTPUT:


Display: Inline

By default DIV elements are displayed block:
  • They occupie the full width available.
  • They create a new line before and after them.
  • As a Result DIVs are arranged below each other.
But in case that you need Divs to be displayed beneath each other there is a solution: display: inline
HTML

CSS

OUTPUT:

NOTE: For the inline-DIVs width does not work.

Max-Width

CSS max-width can be very useful: You can set the maximum width of a DIV with it. But the real advantage is that the DIV will resize with the size of the browser window.

Helpful Links

w3schools/float
w3schools/display-inline
w3schools/max-width

Leave a Reply