Positioning

The Div Tag

The <div> tag is an HTML tag that stands for Division, and is used for dividing up sections of your page. This can be used to create a specific section of your page or to create a box around the whole page (similar to how we used tables for that).

The <div> tag works with both CSS classes and IDs, and needs to be closed. It also can have inline styles added to it. The most common uses for the div tag are to break the page into sections. For example, your page might have a div for a header, another div for the navbar, another div for the main content, and another div for the footer.

The CSS Box Model


The CSS Box Model

The box model is key in understanding how the margins, borders, and padding are applied to the content. Look at this model. The inside is the content, where all your text or images are. The padding is applied before the border, and lasting the margin affects the outermost area.





Example 1a – The CSS Code 


.reddashed {

color:blue;

font-size:30px;

border-style:dashed;

border-width:5px;

border-left:10px;

border-right:10px;

border-color:red

}


#main {

margin:100px;

padding-top:5px;

padding-right:10px;

padding-bottom:5px;

padding-left:10px;

border:5px solid green;

background-color:aqua;

}





Example 1b – The HTML Code 


<html>

<body>

<h1>This a normal heading.</h1>

<div class=”reddashed”>This is the reddashed class using a div tag.</div>

<div id=”main”>All the main text of the page goes here.</div>

</body>

</html>

From the example, we can see that the div tag is using the class from the CSS called reddashed and the main content is using a div to call the ID from the CSS.


Practice:

  1. In your practice folder create a new file in Notepad called boxstyle.css.

  2. In your CSS, create one class and one ID.

  3. The ID should be your main content. It should be centered and have padding around each side.

  4. The class needs to have visable borders around each side.

  5. Then create a new file in Notepad called boxes.html.

  6. Create a page and use two div tags to call the class and the ID.