CODEWITHSUNDEEP
htmlcsslayout
Fabricio Mancuzo
Fabricio Mancuzo

Reputation: 3

Footer always on bottom, 3 columns

I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars - a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)

I've seen many similar questions, but none of them seen to work with 3 columns. I'm not sure, but I think it's something related to floating the columns of the content.

Here's the HTML code:

<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
    <div id="column-left"></div>
    <div id="content"></div>
    <div id="column-right"></div>
</div>
<div id="footer"></div>

Here's the CSS code:

html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}

Here's an example of what's happening when I add some content: http://jsfiddle.net/Lzp67xyu/

Upvotes: 0

Views: 1506

Answers (2)

Bryant Frankford
Bryant Frankford

Reputation: 391

Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.

.columnncontainer{
    width:80%;
    margin-bottom:50px;
    background-color:yellow;
    display:inline-block;
}

Here's a JSFiddle I came up with as example: http://jsfiddle.net/y5xwop8h/1/

Upvotes: 0

Lal
Lal

Reputation: 14810

See this fiddle

Change positioning of #footer to relative and add clear:both to #footer.

That is, the CSS for #footer would be like

#footer {
    clear: both;
    position:relative;
    bottom:0;
    width:100%;
    height: 100px;
    background: blue;
}

According to the docs

The clear property specifies on which sides of an element where floating elements are not allowed to float.

Upvotes: 2

Related Questions