Responsive 2-column layouts with CSS3

Using divs in web development is standard practice these days, but sometimes divs can’t do what tables used to do. Tables could easily create a 2-column layout where both columns had equal heights but a table couldn’t create a single-column layout when the window size changed. Divs work great for flowing layouts and responsive designs but their height property can be troublesome when a div is floated.

Here’s an example for creating a 2-column layout which realigns itself into a one-column layout when the window width is smaller than 660px.

2-column layout using divs:

Responsive layout coverts to 1 column:

Here is the code that will create the layout pictured above.

Test

      <div id="column_wrapper">
           <div id="inner-wrapper">
                <!-- Column 1 -->
                <form id="form_col1" method="post">
                     <br />
                     <br />
                     <br />
                     <br />
                     <br />
                     <br />
                </form>

                <!-- Column 2-->
                <form id="form_col2" method="post" action="">
                     <br />
                     <br />
                     <br />
                     <br />
                </form>
           </div>
      </div>
 </div>