How to Create a Webpage with Equal Heights Columns

Steps

1. Create a standard layout using a DOCTYPE, a STYLE, and a DIV with two nested DIVs.
2. Name your DIVs so that they can be worked on. The first DIV is going to use "id", while the nested DIVs are going to use "class".
3. Tell CSS how to manipulate these DIVs. 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.
4. Add some content at this point. 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.
5. Preview the page.

   • 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.
6. Make some changes to fix this. 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.
7. Make sure the two nested DIVs are now treated as table cells. Create a border around the two, so that you can see how this is all going to pan out.
8. Look at the difference that's made.
9. Add more text into one of the cells. 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.