An updated 2 Column (Fluid Fixed) Layout

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>




Related Posts


Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post