Blog Web Dev An updated 2 Column (Fluid Fixed) Layout

An updated 2 Column (Fluid Fixed) Layout

By Forrest Smith - Drempd.com

An alternate method for 2 columns, with a fixed column on the right and fluid on the left. The main goal here was to be able to have the secondary column (\’.col-right\’) appear above the main column (\’.col-main’) when the screen width was decreased. This wan\’t possible with the other method for achieving the column placements.

A couple of notes:

1. The main thing here is the update to the standard \’clear\’ class. If we were to clear ‘both’, as with the standard clear class — it drops everything below it to below the div with the ‘col-right’ class. Clearing only on the left avoids this.

2. Also note that the ‘right column’ needs to appear above the code for the main column

This seems to work on everything except IE 7. I haven’t encountered any unexpected results with this yet.

<!DOCTYPE html>
<html>
    <head>
       <style>
          .left{
              float: left;
          }
          .right{
              float: right;
          }

          .col-2fx .col-main-wrapper{
              width: 100%;
          }
          .col-2fx .col-main{
              background: #d5d5d5;
              margin-right: 300px;
          }
          .col-2fx .col-right{
              width: 250px;
              float: right;
              background: #d5d5d5;
          }
         .col-2fx .clear{
             clear: left;
          }

          @media only screen and (max-width : 1250px) {
             .col-2fx .col-main,
             .col-2fx .col-right{
                 float: none;
                 width: 100%;
             }
          }

    </style>
</head>
<body>
    <div class=\"col-2fx\">
        <div class=\"col-right\">
            Right
        </div>
        <div class=\"col-main-wrapper\">
            <div class=\"col-main\">
                <div class=\"left\">
                    Left
                </div>
                <div class=\"right\">
                    Right
                </div>
                <div class=\"clear\"></div>
                Test Content for under the two floated divs.
             </div>
         </div>
    </div>
</body>
</html>