Now that we have talked about a key concept, the CSS Box Model, let's examine how to use <div> elements for our design!

Note for the astute: You will notice that many of our examples have inline styles or page CSS declaraions. As has been stated before, this is not a good practice, particularily inline styles, as this makes it difficult to update or change the CSS. For the purposes of this and other demonstrations, we will ignore this.

Let's start small. First we'll create two <div> elements.

Note: The black border is to outline where the two created <div> elements are, and are not part of what we created.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Aenean aliquam turpis non tellus.

Donec sem. Nullam id eros. Nulla et pede. Mauris hendrerit. Maecenas massa. Suspendisse urna odio, luctus suscipit, bibendum eu, gravida in, eros. Curabitur scelerisque ultrices lorem. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Code used in creation of the above example:

<div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Aenean aliquam turpis non tellus. </p>
</div>

<div>
   <p>Donec sem. Nullam id eros. Nulla et pede. Mauris hendrerit. Maecenas massa. Suspendisse urna odio, luctus suscipit, bibendum eu, gravida in, eros. Curabitur scelerisque ultrices lorem. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

As you can see, by default each <div> has a width of 100% by default, and are placed one after the other. Let's set their widths, to make them more managable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Aenean aliquam turpis non tellus.

Donec sem. Nullam id eros. Nulla et pede. Mauris hendrerit. Maecenas massa. Suspendisse urna odio, luctus suscipit, bibendum eu, gravida in, eros. Curabitur scelerisque ultrices lorem. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div style='width: 30%;'>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Aenean aliquam turpis non tellus. </p>
</div>

<div style='width: 60%;'>
   <p>Donec sem. Nullam id eros. Nulla et pede. Mauris hendrerit. Maecenas massa. Suspendisse urna odio, luctus suscipit, bibendum eu, gravida in, eros. Curabitur scelerisque ultrices lorem. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Instead of using percentages for widths, you are free to use any form of measurement allowed in CSS, discussed more in depth on the Size Units page. Now that we have created two <div> elements, let's move onto another useful property of divs: floating.