HTML DIV Tutorial

You use HTML DIV tags to primarily structure the layout of your website. In this HTML DIV tutorial, you will learn how to first set the HTML up, and then reference the specific DIV tags in CSS. 

In the div tutorial below, you will see one example of how DIV tags can work. Traditionally you would stick other HTML content inside of each DIV tag, like paragraphs of text, images or lists.

HTML DIV Example:

CSS DIV Example:

div#left {
   display:inline;
   float: left;
   width: 55px;
   height: 55px;
   background-color: red;
}
div#right {
   display:inline;
   float: left;
   width: 55px;
   height: 55px;
   background-color: black;
} 

Result:

Using display inline and float left together means the HTML DIVs will line up side by side. If you instead use display:block; without the float property, they will end up on top of each other.