CodePen

HTML

            
              <div class="wrapper">
        <div class="main">
            <h1>Main</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            
            <h1>Main</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        
            <h1>Main</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        
        </div>

        <div class="leftcol">
            <h1>Left</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        
        </div>

        <div class="rightcol">
            <h1>Right</h1>
            <p>Lorem ipsum dolor sio repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        
        </div>
    </div>
            
          
!

CSS

            
              $red: #ff3333;
$green: #33ff33;
$blue: #55aaff;
$grey: #222222;
$white: #eeeeee;

body{
    background: $white;
    color: $grey;

    @media screen and ( min-width: 600px ) and ( max-height: 500px ){
        background: $grey;
    }
}

h1, p{
    text-shadow: 0 -1px 1px rgba( $white, 0.3 );
}

h1{
    margin: 0;
}

div{
    @include border-radius( 6px, 6px );
}

.wrapper{
    padding-top: 10px;
    margin: 0 10px;
    position: relative;

    @media screen and ( min-width: 600px ){
        margin: 0 auto;
        width: 80%;
    }

    @media screen and ( min-width: 1200px ){
        width: 50%;
    }

    @media screen and ( min-width: 600px ) and ( max-height: 500px ){
        width: 90%;
    }
}

.main, .leftcol, .rightcol{
    padding: 2%;
    margin-bottom: 10px;
}

.main{
    background: $red;

    @media screen and ( min-width: 600px ){
        width: 68%;
        float: right;
    }

    @media screen and ( min-width: 1200px ){
        width: 46%;
        float: left;
    }

    @media screen and ( min-width: 600px ) and ( max-height: 500px ){
        float: none;
        width: 52%;
    }

    @media screen and ( min-width: 1200px ) and ( max-height: 500px ){
        width: 40%;
    }
}

.leftcol{
    background: $blue;

    @media screen and ( min-width: 600px ){
        width: 22%;
        float: left;
    }

    @media screen and ( min-width: 1200px ){
        width: 44%;
        float: right;
    }

    @media screen and ( min-width: 600px ) and ( max-height: 500px ){
        position: fixed;
        top: 10px;
        width: 34%;
        right: 5%;
        float: none;
    }

    @media screen and ( min-width: 1200px ) and ( max-height: 500px ){
        width: 20%;
        right: 30%;
    }
}

.rightcol{
    background: $green;

    @media screen and ( min-width: 600px ){
        float: right;
        width: 68%;
    }

    @media screen and ( min-width: 1200px ){
        width: 44%;
    }

    @media screen and ( min-width: 600px ) and ( max-height: 500px ){
        float: left;
        width: 52%;
    }

    @media screen and ( min-width: 1200px ) and ( max-height: 500px ){
        position: fixed;
        top: 10px;
        width: 20%;
        right: 5%;
        float: none;
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................