Left Division

There are few simple rules that you can follow to make structuring pages with the dvision tag a little simpler. These rules apply when you are trying to place 2 or more divisions horizontally adjacent to each other on the same page. (As shown below)

Division 1

Division 2

Notice the code for the left and right division is the same except for background-color. You could use the float : right property in the right division.

Code left division.

<div STYLE="float : left; width :50%; height:500px; background-color :#DFDFDF">text</div>

Right Division

1. Don't place borders on adjacent divisions.
2. Don't set margins or padding for adjacent divisions.
3. Set padding and margins for elements inside the division.
4. Place a <br clear="all"> tag below the last adjacent division.
5. For liquid pages (pages that adjust better to different resolution settings) use percentage settings for widths.
6. To equalize columns use absolute height settings. Then leave extra space at the bottom for flexing.

Code right division.

<div STYLE="float : left; width :50%; height:500px; background-color :#BFBFBF">text</div>

Back to Division Tag

Back to 3 Columns Without Tables