• Register
468 points
‚óŹ5

3 column css layout with header and footer

The html

<html>   
 <div class="Container">
        <div class="Header">
            <h1>Header</h1>
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id hendrerit nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sodales nisi a leo pharetra, at dictum mauris aliquet. Vivamus hendrerit, lorem a facilisis elementum, enim libero porta nulla, in mattis erat metus sit amet augue. Aliquam elementum lacus nec finibus mattis. Sed quis velit vitae ante finibus aliquam eget non lacus. Mauris augue massa, sodales ut convallis vitae, pellentesque sagittis nulla. Nulla tincidunt odio sagittis cursus efficitur. Morbi commodo vehicula lacinia. Vestibulum mattis eleifend malesuada. </p>
            
        </div>
        <div class="HeightTaker">
            <div class="Wrapper Container Inverse">
                <div>
                    <div class="Footer">
                        <p>The footer behave just like the header</p>
                    </div>
                </div>
                <div class="HeightTaker">
                    <div class="Wrapper Content">
                        <div class="Table">
                            <div class="Column C1">
                                <h1>Column 1</h1>
                                <p>The Content div should always span the available Container space.</p>
                            </div>
                            <div class="Column C2">
                                <h1>Column 2</h1>
                                <p>Mauris quis ipsum augue. Proin semper orci eget dolor venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis justo lobortis neque sodales fringilla ac ut velit. Cras condimentum magna lorem, vel pulvinar neque auctor pretium. Curabitur magna est, feugiat ut nulla ut, maximus sagittis nulla. Duis nec magna eget purus euismod auctor ut ut eros. Vivamus sed nisi in nisi tincidunt placerat sed vitae mi. Donec condimentum quis augue vel placerat. In a dolor pellentesque, maximus magna eu, gravida urna. Fusce vestibulum risus ac risus laoreet, eget venenatis quam suscipit. Aliquam tristique dui non magna molestie pellentesque. Mauris vitae tincidunt sem, et mollis leo. Suspendisse placerat ac diam et euismod. Nam placerat libero quis tincidunt aliquam. Aliquam at maximus lorem, laoreet luctus urna. </p>
                            </div>
                            <div class="Column C3">
                                <h1>Column 3</h1>
                                Nulla facilisi. Morbi a lacus ipsum. Phasellus congue et tellus id eleifend. Duis varius mauris consequat aliquet ultrices. Vestibulum vehicula nisl eu mi condimentum bibendum. Morbi efficitur, elit a facilisis placerat, tortor urna finibus dolor, eu vestibulum neque nibh dapibus nibh. Cras accumsan malesuada feugiat. Donec ut nisi id purus scelerisque commodo et non arcu. Nulla sodales id nunc vitae eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem tortor, faucibus posuere erat eu, placerat hendrerit nulla. 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>

 

The CSS

{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.Table
{
    display: table;
    height: 100%;
    width: 100%;
}
.Column
{
    display: table-cell;
}

/*For demonstration only*/
p
{    
    font-size: 1.3em;
}

.Important
{
    font-weight: bolder;
    color: white;
}

body > .Container
{
    text-align: center;
}

.Header, .Footer
{
    padding: 5px 0;
}
.Header
{
    background-color: #bf5b5b;
}
.C1
{
    background-color: #90adc1;
}
.C2
{
    background-color: #b6ff00;
}
.C3
{
    background-color: #723131;
}
.Footer
{
    background-color: #b5a8b7;
}

 

2 Comments

Comment

When I started learning programming, I first practiced in html. After creating a website in it, we used to decorate our website in css. You have explained the code of footer and header with 3 columns.  The footer is the last part of the website. Please help improve this article or section by expanding it.:)yes

On the internet, you never know what you'll find. It's full of surprises, just like this incredible blog.