Four columns with footer 3 : Four Columns « Layout « HTML / CSS

Four columns with footer 3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
            <style type='text/css'>
                div {
                    font: 18px sans-serif;
                    border: 1px solid black;
                    background: gray;
                    height: 400px;
                    padding: 5px;
                div#column1 {
                    float: left;   
                    width: 150px;
                    margin: 0 5px 0 0;
                    background: yellow;
                div#column2, div#column3 {
                    float: right;   
                    width: 150px;
                    margin: 0 0 0 5px;
                    background: pink;
                div#column4 {
                    margin: 0 334px 0 167px;
                    background: red;
                div#footer {
                    height: 35px;
                    margin: 5px 0 0 0;
                    clear: both;
            <div id='column1'>
                Content of column 1.
                    <li><a href=''>A</a></li>
                    <li><a href=''>B</a></li>
                    <li><a href=''>C</a></li>
                    <li><a href=''>D</a></li>
                    <li><a href=''>E</a></li>
                    <li><a href=''>F</a></li>
            <div id='column2'>
                Content of column 2.
            <div id='column3'>
                Content of column 3.
            <div id='column4'>
                Content of column 4.
            <div id='footer'>
                Content of footer.


Related examples in the same category

1.Main title with four columns under
2.Four columns with absolute position
3.4 columns, all fluid
4.Four columns with footer
5.four column with float, and a footer with clear both
6.Four columns with footer 2
7.Faux Column CSS Layouts - 4 Column - faux-39-4-col
8.Faux Column CSS Layouts - 4 Column - faux-40-4-col
9.Faux Column CSS Layouts - 4 Column - faux-41-4-col
10.Faux Column CSS Layouts - 4 Column - faux-42-4-col
11.Four even columns with two level header
12.Four column layout