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

<div id= float_r>float:right</div> <div id = float_l>float:left</div>

CSS

#float_r{ float:right; background-color: #ccc; padding: 15px; } #float_l{ float:left; background-color: #ccc; padding: 15px; }

OUTPUT:

---

floated DIVs inside a parent DIV:

HTML

<div id = box> <div id= float_r>float:right</div> <div id = float_l>float:left</div> </div>

CSS

#box{ border: 2px solid #b6dedc; margin: 0.2em; width: 300px; } #float_r{ float:right; background-color: #ccc; padding: 15px; } #float_l{ float:left; background-color: #ccc; padding: 15px; }

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

<div id = box> <div class= float>float:right</div> <div class = float>float:right</div> <div class= float>float:right</div> <div class = float>float:right</div> <div class= float>float:right</div> <div class= float>float:right</div> <div class = float>float:right</div> </div>

CSS

#box{ border: 2px solid #b6dedc; margin: 0.2em; width: 400px; } .float{ float:right; background-color: #fff; padding: 15px; border: 1px solid #ccc; margin: 2px; }

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

<div id = box></div> <div id= text>The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.The Text flows around the div.</div> </div>

CSS

#box{ float: right; background-color: #b6dedc; height: 50px; width: 80px; }

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

<div id = default>default DIV</div> <div class= inline>display: inline</div> <div class= inline>display: inline</div> <div class= inline>display: inline</div> </div>

CSS

#default{ background-color: #b6dedc; height: 20px; padding: 8px; margin-bottom: 8px; } .inline{ display: inline; background-color: #ccc; height: 20px; padding: 8px; }

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