How to use CSS and DIV tags to make a 2-column web page the same length


How to make 2 column web page using CSS
to  automatically size both to equal length.

If you use CSS and div tags to make two columns
on a web page - the columns will not be the same
length as shown below:



Okay, what do we have to do - to make the columns the same
length?  Here's the answer:

1. The page is built with a "container"  div ( called it  "wrapper" )
     and two div(s) within the container. Called  "wrapper-l"
     for the left hand side and "wrapper-r"  for the right hand side.
2.  added the following line of code to "wrapper":

         overflow: hidden;

3.  added the following two lines of code to "wrapper-l" and 
      "wrapper-r" :

            padding-bottom:  9000px;
             margin-bottom: -9000px;

     Note: I made the padding a length that would be larger
                then either column would ever be. In this case 
                I picked 9000 pixels.

Now let's see what it looks like - see below:



See how both columns are now of equal lengths.  So if one column
grows longer than the other - the other one will "fill" to the next div tag,
ie, the gray strip at the bottom - called "footer"

here is the skeleton code (feel free to copy)



SKELETON CODE: