HTML Code Tutorial

Division Tag

Anything you add to a division in the way of margins, border or padding adds to the size of the division.

In the 4 examples shown below, let's say that he first red box is a division. It is 600 pixels wide and 600 pixels in height. It has no margins, padding or borders.

In the second box we add a 4 pixel margin to the original division. This increases the size of the division to 608 pixels wide by 608 pixels high.

In the third example we add 5 pixels of padding to the inside of the division. This stretches the division out to a measurement of 610 pixels wide by 610 pixels in height.

In the last example we add a simple 1 pixel border. This increases the size of the division to 602 pixels wide by 602 pixels in height.

Division tag demo 1

Note: Area in blue represents spacing in pixels added by margin, padding or border.

What's the Problem

In the method we are using to align horizontal adjacent divisions, if the width of the nested divisions exceed the width of their container, your page will look like this:

Division diagram 2 Say the white box is your container division. Its width is set to 1800 pixels wide by 600 pixels in height. (You would never create a page this wide.)

With the dimensions specified in the examples shown above the combined width of your nested divisions is 1820 pixels wide. The third nested division does not fit inside the container so it misaligns to a position below the first 2 divisions.

This is why you must adjust the width and height of your nested divisions if you add margins, padding or borders.

The Fix

To get the nested divisions to line up inside of the 1800 by 600 container division, the adjusted CSS is shown below:

Division tag diagram 3

#division-left {
float: left;
width: 592px;
height: 592px;
margin: 4px 4px 4px 4px
}

#division-middle {
float: left;
width: 590px;
height: 590px;
padding: 5px 5px 5px 5px
}

#division-right {
float: left;
width: 598px;
height: 598px;
border: solid #000000 1px
}

Controlling Overflow

controlling Overflow When using fixed height divisions, you must control the amount of content that you place within a division. If you add too much content you'll get a result like the diagram shown on the left.

This phenomenon is callled overflow.

One solution would be to place an embedded style sheet in the head section of the document below the link to your style sheet and increase the height of the container and all nested divisions.

Another solution would be to use the overflow property when formatting your divisions.

Either of the examples shown below will produce scroll bars on the affected division.

#division-middle {
float: left;
width: 590px;
height: 590px;
padding: 5px 5px 5px 5px;
overflow : scroll

}

#division-middle {
float: left;
width: 590px;
height: 590px;
padding: 5px 5px 5px 5px;
overflow : auto
}

Note: These scroll bars can be really ugly when they don't match the colors of your division. The CSS code for changing colors only works in the IE browser. There are javascript clips that you can add to your page that will work in both browser types.

Advanced Students

When you understand the concept of fixed height divisions and can build a web page with divisions that line up and center on a page, you are ready to remove the height setting.

Creating web pages that adjust with the amount of text placed in a division can be a little frustrating. We've found a simple solution that beginners will be able to handle.

Visit our Free Template Gallery and download the First Easy CSS Kit.