Master Page Layout

by Laurie

HTML

<div id="homepage">
    <!-- RIGHT COL -->
    <div id="rightCol" style="float:right; width:300px;">1</div>
    <!-- END rightCol -->
    
    <!-- LEFT COL -->
    <div id="leftCol" style="overflow:hidden; margin-right:310px;">
        <!-- single column -->
        <div id="headerZone">1</div>
        <!-- END headerZone DIV -->
        <div class="clearfix" style="clear:both;  height:10px;"></div>
        <!-- END clearfix DIV -->
        <!-- two columns -->
        <div id="leftTwoCol" style="float:left; width:600px;margin:0px 10px 0px 0px;">1</div>
        <div id="rightTwoCol" style="min-width:300px; float:left;">2</div>

         <div class="clearfix" style="clear:both;  height:10px;"></div>
    <!-- END clearfix DIV -->       
        
    <!-- three columns -->
    <div id="leftThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">1</div>
    <!-- END leftThreeCol DIV -->
    <div id="centerThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">2</div>
    <!-- END centerThreeCol DIV -->
    <div id="rightThreeCol" style="float:left; width:32%">3</div>
    <!-- END rightThreeCol DIV -->
        
    <div class="clearfix" style="clear:both;  height:10px;"></div>
            <!-- three columns -->
    <div id="leftThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">1</div>
    <!-- END leftThreeCol DIV -->
    <div id="centerThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">2</div>
    <!-- END centerThreeCol DIV -->
    <div id="rightThreeCol" style="float:left; width:32%">3</div>
    <!-- END rightThreeCol DIV -->
    
        <div class="clearfix" style="clear:both;  height:10px;"></div>
    <!-- END clearfix DIV -->
    
            <!-- three columns -->
    <div id="leftThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">1</div>
    <!-- END leftThreeCol DIV -->
    <div id="centerThreeCol" style="float:left; width:32%; margin:0px 10px 0px 0px;">2</div>
    <!-- END centerThreeCol...

CSS

#leftCol {
    border:3px #000000 solid;
}
#rightCol {
    background-color:blue;
}
#headerZone {
    background-color:red;
}
#leftTwoCol {
    background-color:green;
}
#rightTwoCol {
    background-color:purple;
}

#leftThreeCol{
   background-color:pink;
}

#centerThreeCol{
    background-color:gray;
}

#rightThreeCol{
    background-color:teal;
}

#footerZone{
    background-color:red;
}