HTML Div

The HTML Div Tag is a container for other HTML elements. Within HTML development the HTML Div Tag is used to layout HTML elements on a page, and can be used to group HTML Elements together.

As mentioned above, you use the HTML Div Tag to layout your page, the only other way to layout your HTML web page is to use Tables. In my humble opinion I would suggest you use div's for page layout. Although you can use HTML Tables.

Debate : Use HTML Divs or HTML Tables

Using the HTML Div Tag

The following demonstrates how to use the div tag to layout your web page.

 

Try This :

 

<html>
 <body>
 Hello World
 </body>
</html>

you will see that the web page displays 'Hello World' on one line.

Now try adding div tags around the 'Hello World'.

<html>
 <body>
 <div>Hello World</div>
 </body>
</html>

You can see that this also displays 'Hello World' on one line.

Now here comes the HTML Div Tag magic!

Add 'Hello' in one div tag and 'World' in another.

 <html>
 <body>
 <div>Hello</div>
 <div>World</div>
 </body>
 </html>

As you can see the divs have changed the layout of the web page! Hello is now above World.

Adding Styling to a Div

Now lets try something more nifty, first of all add a border to each of the Div tags, you can do this using in-line CSS.

In-line CSS is CSS within the HTML web page.

CSS is used to style HTML.

This is done by adding style=”border: 1px solid red;” to both the div's. Lets add a red border to one html div and a green border to the other, so go ahead and add style=”border: 1px solid red;” as an attribute in the first div and style=”border: 1px solid green;” as an attribute in the second div.

You will get something like below.

 <html>
 <body>
 <div style="border: 1px solid red;">Hello</div>
 <div style="border: 1px solid green;">World</div>
 </body>
</html>

You should get 'Hello' with a red border round it and 'World' with a green border.

When debugging or developing a website it is VERY VERY useful to add borders to HTML div tags so that you can see what each div contains and where it starts and ends.

Now lets play with the div layout using in-line CSS Styles.

Lets add float:left; to the first div. Float CSS allows the div to be placed on the left and moves everything else to the right of it.

ie. Your HTML code will now look like the following.

<html>
 <body>
 <div style="border: 1px solid red;float:left;">Hello</div>
 <div style="border: 1px solid green;">World</div>
 </body>
</html>

Wow ! So now you have Hello and World is right next to it. Awesome! I guess you can have fun with this lining up an image in one div with text to the left or right of the image.

Use CSS Clear Both  <div style=”clear:both;”></div> to clear the CSS float within a layout.

HTML Div Tag Layout using the Align Attribute.

HTML divs can also be layed out using the align attribute. To align a div using the align attribute, try the following;

<html>
 <body>
 <div align=”left” >Hello</div>
 <div align=”right”>World</div>
 </body>
</html>

That's weird isn't it ! When you open up the page Hello is on the top left, and World is on the right.

Let's see what happened to the div's by placing a border using in-line CSS, around the div's the same way we did earlier.

<html>
 <body>
 <div align="left" style="border:1px solid red;">Hello</div>
 <div align="right" style="border:1px solid green;">World</div>
 </body>
</html>

Ah, so one div is on top of the next, but Hello Is aligned left and World is aligned right.

Hum, what happens if we where to put a div around the whole thing, and then set a width on the div. Below I have set the width of the div to 100px using in-line CSS.

<html>
 <body>
 <div style="width:100px;">
 <div align="left" width="100px;" style="border:1px solid red;">Hello</div>
 <div align="right" style="border:1px solid green;">World</div>
 </div>
 </body>
</html>

Add More Styles to a Div!

Above you saw how we added width to style a div and also added borders to the div to help us see what was happening to the layout of the HTML Div. Now we will use the style attribute to add more styles ! This time a background color, using background:black; and a color for the text using color:white;

<html>
 <body>
 <div style="width:100px;">
 <div bgcolor="green" align="left" style="border:1px solid red;background:black;color:white;">Hello</div>
 <div align="right" style="border:1px solid green;">World</div>
 </div>
 </body>
</html>

In my humble opinion the HTML Div tag is amazing, and for me it is my most used HTML Tag, as this is what I construct all my layouts with. For yourself it's worth spending the time constructing more complex layouts for yourself using the HTML Div tag. I always find it helps to try and work towards something, perhaps try mocking up a simple page in Photoshop/ Fireworks or your favorite Web Design package and laying it out using divs.

Remember <div style=”clear:both;”></div> can be used to clear the CSS float within a layout.

 

Browse more tutorials...

AddThis Social Bookmark Button