How to Create a Webpage with Equal Heights Columns

Step-by-Step Guide

1. 1

   Step 1: Create a standard layout using a DOCTYPE

   The first DIV is going to use "id"
   
   while the nested DIVs are going to use "class". , You make these style changes within the style tags.
   
   Make sure of the "#" and "." in front of the tags.
   
   These are important, and without them, everything breaks. , It will give you some idea as to how things are going to look as you progress.
   
   Add some content to the left and right DIVs. , Not only is this pretty bland, but the DIVs are not properly aligned either.
   
   You'll notice that "Right" is under "Left"
   
   not to the side of it. , Change the CSS beginning with the ID, which needs to be treated as a table.
   
   Set a width of 80% of the screen and centre align the whole box. , Create a border around the two, so that you can see how this is all going to pan out. ,, You'll see that no matter how big the box on the left gets, the box on the right retains the same size as the left one.
2. 2

   Step 2: a STYLE

3. 3

   Step 3: and a DIV with two nested DIVs.

4. 4

   Step 4: Name your DIVs so that they can be worked on.

5. 5

   Step 5: Tell CSS how to manipulate these DIVs.

6. 6

   Step 6: Add some content at this point.

7. 7

   Step 7: Preview the page.

8. 8

   Step 8: Make some changes to fix this.

9. 9

   Step 9: Make sure the two nested DIVs are now treated as table cells.

10. 10

    Step 10: Look at the difference that's made.

11. 11

    Step 11: Add more text into one of the cells.

Detailed Guide

About the Author