HTML Div

An HTML div tag is nothing more than a container or a section that includes other HTML elements. The <div></div> tag specifies a division or section of HTML. Take a look at the following code example below:

<div id="container">
  <p>I'm a paragraph inside of a div tag</p>
</div>

The code above will have the following result.

HTML Div Example:

The <div></div> tag can be used anywhere on your web page. They can be used by themselves or to wrap other elements. Typically div's are used with CSS to give the element a little bit of style. Take a look at the code example below with some inline styles:

<div style="width:100px; height:100px; background:blue; float:left"></div>
<div style="width:100px; height:100px; background:green; float:right"></div>

And the code above will have the following result:

HTML Div Example 2

In the examples above we are using a new CSS values which is float:left and float:right. Using these values will tell the block element to be positioned to the right or the left of the content. These float values are commonly used to position elements on a web page. Make sure to note that if you have 2 elements floating to the left, they will typically be side-by-side. Take a look at the following example code:

<div style="width:100px; height:100px; background:blue; float:left"></div>
<div style="width:100px; height:100px; background:green; float:left"></div>

This will result in the following:

HTML Div floating left

If you did not want them to be side by side you could simply remove the float:left property. There's also another property called clear:left that you can use to clear the element floating left. We can go into that in more detail in the CSS section.

Next, let's move on to talking about HTML Forms.