Two Columns using CSS

 
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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PC Technician </title>
<META name="description" content="">
<META name="KEYWORDS" CONTENT="">
<style type="text/css">
body {
        font-family: verdana, helvetica, arial, sans-serif;
        font-size: 12px;
        text-align: center;
      /*  put in your background image for the background  */
      /*  and remove the comment brackets on the image URL   - below  */
      /*  background: url(http://www.yoursite.com/images/yourimage.jpg); */

       /*  set bacground color  below  - then make sure the background image above  */
       /*  is commented out   */

       background:  #44eeff;

        color: #000000;
}

#top    { position: absolute;
          left:  0;
          right: 0;
          top:    0;
         }

#header {
        left: 0; top: 0;
        width: 100%;
        height:  50px;
        background: #446688;
        color: red;
        font-size: 24px;
        margin-left: auto;
        margin-right: auto;

}

#header  a  { color: #ffffff;
             font-size: 16px;}


#header a:hover {color: #ffd700; }


#wrapper {
         margin: auto;
         width: 650px;
        padding: 0px;
        overflow: hidden;
}

#wrapper-l  {
              position: relative;
              float: left;
              width: 350px;
              background: #00ff00 ;
              margin-bottom:  -9000px;
              padding-bottom:  9000px;
            }

#wrapper-r  {
              position: relative;
              float: right;
              width: 300px;
              background: #ff2200;
              color: #000000;
              margin-bottom:  -9000px;
              padding-bottom:  9000px;

            }

#footer { margin: auto;
         clear: all;
         width: 650px;
         height: 50px;
        padding: 0px;
         background: #f1f1f1;
         position: float;
}

</style>
</head>
<body>

<div id="top">


<div id="header">
| <a href="/">Home</a> |
  <a href="sitemap.htm">Sitemap</a> |
</div>


<div id="wrapper">

         <div id="wrapper-l">
<div style="text-align: left;  width: 150px; margin-left: 100px;" >
<p>
This rather narrow block of text is centered.
Note that the lines inside the block are not
centered (they are left-aligned).
<img src="images/body_bg.jpg"  width=50 height=100>
</p>
</div>

        </div>

        <div id="wrapper-r" style="text-align: left;">
<div style="text-align: left;  width: 150px; margin-left: 40px;" >
<p>
Okay - this is the text for the right side - This side is longer than
the left  side because of the image (verticle dark gray bar) below:
<br>
<img src="images/body_bg.jpg"  width=50 height=200>
<br>
See how the left hand side fills the color to the next div block
(the gray horizontal bar below). The columns are now of equal length.
<br>
<br>
<br>
</div>
       </div>

</div>  <!--  end wrapper -->

<div id="footer"> </div>



</div> <!-- end top div -->
</body>
</html>