Pages

Top level page layout for Magento's standard options, 1column, 2columns-left, 2-columns-right and 3columns.

Common Page Styling

Base Column Sizes

1 Column


    <div class="wrapper">
        <div class="page">
            <div class="main-container col1-layout">
                <div class="main">
                    <div class="col-main">
                        Content
                    </div>
                </div>
            </div>
        </div>
    </div>


.col1-layout .col-main { float:none; width:auto; }

2 Columns (Left)


    <div class="wrapper">
        <div class="page">
            <div class="main-container col2-left-layout">
                <div class="main">
                    <div class="col-main">
                        Content
                    </div>
                    <div class="col-left sidebar">Left Column</div>
                </div>
            </div>
        </div>
    </div>


.col2-left-layout {
    .col-main { float:right; }
}

2 Columns (Right)


    <div class="wrapper">
        <div class="page">
            <div class="main-container col2-right-layout">
                <div class="main">
                    <div class="col-main">
                        Content
                    </div>
                    <div class="col-right sidebar">Right</div>
                </div>
            </div>
        </div>
    </div>


.col2-right-layout { 
    .col-main {}
}

3 Columns


    <div class="wrapper">
        <div class="page">
            <div class="main-container col3-layout">
                <div class="main">
                    <div class="col-wrapper">
                        <div class="col-main">
                            Content
                        </div>
                        <div class="col-left sidebar">Left Column</div>
                    </div>
                    <div class="col-right sidebar">Right Column</div>
                </div>
            </div>
        </div>
    </div>


.col3-layout {
    .col-main { 
        width:484px; 
        margin-left:10px; 
    }
    .col-wrapper { 
        float:left; 
        width:748px; 
        .col-main { float:right; }
    }
}