3 Column Layout

You seek the Grail?

by HugeHugh

HTML

<div class="triColumn-25-50-25">
    <div class="middleColumn">
        <div class="middleContent">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a ullam quae numquam ex autem quidem nemo. Sint libero similique sequi nemo temporibus dolorum ea optio omnis quasi facere suscipit.
        </div>
    </div>
    <div class="leftColumn">
        <div class="sideContent">
        navbar stuff
        </div>
    </div>
    <div class="rightColumn">
        <div class="sideContent">
        sidebar stuff
        </div>
    </div>
</div>

CSS

body{
    font-family:Arial,sans-serif;
}
.triColumn-25-50-25 {
    position:relative;
}

.triColumn-25-50-25 .middleColumn {
    position:relative;
    width:50%;
    left:25%;
    background:#eee;
}

.triColumn-25-50-25 .leftColumn {
    position:absolute;
    left:0;top:0;bottom:0;
    width:25%;
    background:#ffc;
}

.triColumn-25-50-25 .rightColumn {
    position:absolute;
    right:0;top:0;bottom:0;
    width:25%;
    background:#cfc;
}
.sideContent {
    padding:5px;
}
.middleContent {
    border:1px solid #555;
    padding:10px;
}