title: Multi column CSS Layout
body: <p>I am having a hard time trying to make this layout to work the way that I want.
  As you can see the 4 columns appear outside of the wrapping div's and I don't know why.
  Also the columns will be populated with a query so I need their height to be flexible but at the end I need all column to appear of the same height. </p>
  
  <p>Here is the layout live www.onlinesportcenter.com</p>
  
  <p>CODE</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;title&gt;layout&lt;/title&gt;
      &lt;style&gt;
          body {
  
              margin:0;
              border:0;
              padding:0;
              height:100%;
              max-height:100%;
              background:#01245c;
              font-family:arial, verdana, sans-serif;
              font-size:75%;
              overflow: hidden;
  
          }
  
  
          * html body {
  
              padding:116px 0 20px 0;
  
          }
  
          .header-wrap {
  
              position:absolute;
              top:0;
              height:116px;
              width:100%;
          }
  
          .header-wrap #header{
  
              margin:0 auto;
              position:relative;
  
          }
  
          #header {
              background: #666;
              position:absolute;
              top:0;
              left:0;
              width:1020px;
              height:116px;
              text-align:center;
              padding:0;
              margin:0;
  
          }
  
          * html #header {height:116px;}
  
  
  
          .container-wrap {
  
              position:absolute;
              width:100%;
              height:auto;
              margin-top:116px;
              margin-bottom:20px;
              top:0;
              bottom:0;
          }
  
          .container-wrap #container {
  
              margin:0 auto;
              position:relative;
              top:0;
              height:100%;
          }
  
          #container {
  
              font-family: Arial, sans-serif;
              font-size: 1em;
              position:fixed;
              top:116px;
              left:0;
              bottom:20px;
              right:0;
              background:#fff;
              padding:0;
              width:1020px;
  
          }
  
          * html #container {
  
              height:100%;
              width:1020px;
  
          }
  
          #container img {margin:0;}
  
  
          #main {
              background:#fff;
              width:790px;
              height:100%;
              float:left;  
              overflow:auto;
          }
  
          .main-multi-form {
              background:#efefef;
              width:764px;
              margin:4px;
              border:1px solid #adadad;
              vertical-align:top;
          }
  
          .main-multi-form-bettype {
              background:#ddd;
              height: 50px;
              margin:8px 8px 0 8px;
              padding: 14px 0 0 0;
              text-align:center;
              vertical-align:top; 
          }
  
          .main-multi-form-bettype-extra {
              background:#dddddd;
              width:80%;
              height: 24px;
              vertical-align:top; 
              padding:0;
              margin:0 auto 0 auto;
              text-align:center;
          }
  
          .main-multi-form-events {
              background:#ddd;
              margin:8px 8px 8px 8px;
              padding-top: 5px;
              text-align:center;
              vertical-align:top;
              width: 748px;
          }
  
          .main-multi-form-column {
              background: #efefef;
              float:left;
              width:177px;
              margin: 5px;
          }
  
          .main-multi-form-sports{
              background:#fff;
              border:1px solid #666;
              color: #333;
              font-family: Arial, sans-serif;
              font-size: 1em;
              font-weight:bold;
              height: 18px;
              padding: 3px 0 0 0;
              text-align:center;
              vertical-align:top;
              width:175px;
          }
  
          .main-multi-form-leagues{
              padding: 0;
              text-align:left;
              vertical-align:top;
              width:177px;
              height:20px;
  
          }
  
          .main-multi-form-leagues-checkbox{
              float:left;
              margin: 0;
              padding: 0;
              vertical-align:top;
              width:20px; 
          }
  
          .main-multi-form-leagues-league{
              float:right;
              margin: 0;
              padding: 0;
              vertical-align:top;
              width:157px;
              height:20px;    
          }
  
          .main-multi-form-leagues-league a,a:Hover,a:Visited{
              color: #369;
              font-family: Arial, sans-serif;
              font-size: 0.9em;
              font-weight:bold;
              text-decoration:none;
          }
  
          #right {
  
              width:228px;
              height:100%;
              float:right;  
              border-left:1px solid #73a2bd;
              border-right:1px solid #73a2bd;
              text-align:center;
          }
  
  
          .footer-wrap{
              position:absolute;
              bottom:0;
              height:20px;
              width:100%;
  
          }
  
          .footer-wrap #footer{
  
              position:relative;
              margin:0 auto;
          } 
  
          #footer {
            background: #666;
            position:absolute;
            bottom:0;
            left:0;
            width:1020px;
            height:19px;
            overflow:auto;
            text-align:center;
            border-top:1px solid #35759a;
  
          }
  
          * html #footer {height:20px;}
  
          #footer p {
  
            color:#fff;
            font-size:1em;
            margin:2px 0 0 0;
  
          }
  
          form {
              margin:0;
              padding:0;
          }
  
          select {
  
              font-family: Arial,sans-serif;
              font-size:1em;
              color:#000000;
              margin:0;
              padding:0;
              vertical-align:top;
              font-size: 1em;
          }
  
          input {
  
              font-family: Arial,sans-serif;
              font-size:1em;
              color:#000000;
              margin:0;
              padding:0;
              vertical-align:top;
              font-size: 1em;
          }
  
  
          hr
          {
              width:100%;
              color: #000000;
              height: 1px;
          }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="header-wrap"&gt;  
  
      &lt;div id="header"&gt;
  
          HEADER
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container-wrap"&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div id="main"&gt;
  
  
              &lt;div class="main-multi-form"&gt;
  
  
  
                              &lt;div class="main-multi-form-bettype"&gt;
  
                                      TOP MAIN
  
                              &lt;/div&gt;
  
  
                              &lt;div class="main-multi-form-events"&gt;
  
  
                                      &lt;div class="main-multi-form-column"&gt;
  
  
                                              &lt;div class="main-multi-form-sports"&gt;Column 1&lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                             &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                      &lt;/div&gt;
  
                                      &lt;div class="main-multi-form-column"&gt;
  
  
                                              &lt;div class="main-multi-form-sports"&gt;Column 2&lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                             &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                      &lt;/div&gt;
  
                                      &lt;div class="main-multi-form-column"&gt;
  
  
                                              &lt;div class="main-multi-form-sports"&gt;Column 3&lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                             &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                      &lt;/div&gt;
  
                                      &lt;div class="main-multi-form-column"&gt;
  
  
                                              &lt;div class="main-multi-form-sports"&gt;Column 4&lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                             &lt;div class="main-multi-form-leagues"&gt;
  
                                                  &lt;div class="main-multi-form-leagues-checkbox"&gt;
  
                                                          &lt;input class="Selection-Checkbox" type="checkbox" name="checkbox"&gt;
  
                                                  &lt;/div&gt;
                                                  &lt;div class="main-multi-form-leagues-league"&gt;&lt;a href="#"&gt;CHECKBOX&lt;/a&gt;&lt;/div&gt;
  
                                              &lt;/div&gt;
  
                                      &lt;/div&gt;
  
                              &lt;/div&gt;
  
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
          &lt;div id="right"&gt;
              &lt;br /&gt;&lt;br /&gt;
              RIGHT
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="footer-wrap"&gt;
  
      &lt;div id="footer"&gt;FOOTER&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>