Create a Free Website

Division Tag


Division Tag and CSS

The Code

The division tag: <div></div>.

The KEY to mastering web pages is learning to manipulate divisions.

To make divisions easy to understand, think of them as boxes with 4 sides.

You can stack these boxes or align them side by side to create a unique structure for a web page.

You can control the position of the box , its size, background color and add padding, borders and margins using simple CSS (style sheets).

Use the id attribute to name your divisions.

Nesting divisions

Multiple divisions can be nested inside of a container division to create columns on a web page.

Read also: nesting web page elements

They are wisked into place using the float property.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



Note: Use the ID attribute, to name or identify your divisions.

Do not repeat the id reference on the same page.

Use the class attribute for multiple occurrences of the same CSS structure on a single page.

Basic Code for a Web Page

Diagram of typical web page

<!DOCTYPE.......>
<html>
<head><link rel="stylesheet" href="style.css" type="text/css"></head>
<body>
<div id="head"></div>
<div id="main">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
 </body>
</html>


The code shown above is for a 3 column web page with header and footer like the diagram shown on the left.

This is the actual code taken from one of our Simplified templates.

The size and alignment of all the divisions is controlled using a linked style sheet.


Adding Margins

Margins are read clockwise

Margins keep the text and images of adjacent divisions from running up against each other.


#content {
width: 68%;
margin: 0 4% 0 4%
}

Note: For future reference, the values of left and right margins are added to the width of the content division and make its actual width 76%.


Centering Multiple Columns

When centering multiple columns created with divisions set them in a container and center the container division by placing padding on the body of the web page.

HTML code

<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>

CSS

body {
padding: 0 5% 0 5% }

#main {
width: 100% }

#left {
width: 80% }

#right {
width: 20% }

The combined widths of nested divisions must not exceed the width of their container.

If you add padding or margins, you must subtract their values from the width of that division or from the width of an adjacent division.


Problems with Aligning Adjacent Divisions

Beginners will run into problems getting adjacent divisions to line up side by side.

If you can master this concept, you can master the art of building web pages.

Everything you add to a division, margins, padding and borders, adds to its size.

Don't use borders on divisions used for building the structure of the web page.

If you add a 4% margin to a nested division whose width is 20%, the division's actual width is 24%.

If you added an adjacent division with a width of 80%, the total width of the two adjacent divisions would be 104%.

Because the combined width of the 2 adjacent divisions exceeds 100% of available browser space, they would not line up side by side.

There are 2 solutions:

  1. Subtract the value of the margin from the width of the first division making its width 16%
  2. Subtract the value of the margin from the width of the second division making its width 76%

First Solution

#first division {
width: 16%;
margin: 0 0 0 4% }

#second division {
width: 80% }

The combined values of width and margins for the 2 adjacent divisions now equal 100%.
16% + 4% + 80% = 100%

The adjacent divisions will line up side by side.

Second Solution

#first division {
width: 20%;
margin: 0 0 0 4% }

#second division {
width: 76% }

The combined values of width and margins for the 2 adjacent divisions now equal 100%.
20% + 4% + 76% = 100%

The adjacent divisions will line up side by side.

This concept isn't really as confusing as it appears. Spend some time going over it until it sinks in.

Why We're Using Percentages

Most of the tutorials you've visited teach you to use absolute values for defining widths of divisions.

A typical absolute width for a division would be 1000 pixels, coded as 1000px.

If you set the width of your web page to 1000 pixels, it stays at 1000 pixels no matter what device is used to view it.

If someone viewed the site using a tablet with a viewing resolution of 800x600, they would see 800 pixels of your 1000 pixel web page and would have to scroll to the right 200 pixels to view the rest of the web page.

If someone with a high end game machine viewed the site at a resolution of 1920x1200, your web page would only fill about half the width of their browser window.

Now say someone using an Android or a much smaller device with a resolution of about 320x260 pixels viewed your site. How much of your 1000 pixel web page are they going to see?

If you set the width of your web page to 100%, it uses 100% of available browser space.

If it is viewed at a resolution of 320x260 it adjusts to that viewing width.

If it is viewed at a resolution of 800x600 it adjusts to that viewing width.

If it is viewed at a resolution of 1920x1200 it adjusts to that viewing width.

Web pages that use absolute values for setting their width are called static or fixed width web pages.

With the advent of more and more new devices of different sizes and resolutions being used to surf the web, fixed with web pages, like frames, will eventually end up in the W3C grave yard.

Don't build fixed width websites!!

Visit our 7 Step Tutorial for creating easy Liquid Web Pages.



Take a quiz. Take a Quiz on this Information.