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: