100% width sticky footer + header, but centered 3 column content with height 100%?

Asked 2/2, 2012 at 20:44 Answered 3/2, 2012 at 21:17

I am trying to create a webdesign with a full width fixed menu, a full width header, 960px wide centered content with 3 columns (each with the height of 100%) and a full width sticky footer.

In all working examples I have seen header, content and footer is the same width.

(edited) My problem is to make the columns stretch to full height of the screen, from the bottom of the header to the top of the footer, at any screen size.

I have made an example of what I am trying to achieve: http://muku.dk/example.jpg

Is this possible with CSS?

Group answered 2/2, 2012 at 20:44 Comment(1)

To answer your question "Is this possible with CSS?". Yes it is very possible with CSS – Defrock 2/2, 2012 at 20:46

Something like this. Please note that this is just to guide you to the right direction. You have to stick in there youself the equal height columns by using any technique and also the sticky footer.

The Markup

<!Doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>Title Goes Here</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body> 
<div id="wrapper">
<div id="my_menu">
<p>fixed menu width 100%</p>
</div>
<div id="container">
<div id="my_header">
<p>header width 100%</p>
</div>
<div id="content">
<div id="col1">
<p>column 1 width 320px height 100%</p>
</div>
<div id="col2">
<p>column 2 width 320px height 100%</p>
</div>
<div id="col3">
<p>column 3 width 320px height 100%</p>
</div>
</div>
<div id="my_footer">
<p>sticky footer width 100%</p>
</div>
</div>
</div>
</body>  
</html>

The Style

*
{
padding: 0;
margin: 0;
}

html, body
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}

div#wrapper
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}

div#my_menu
{
width: 100%;
min-width: 100%;
height: 50px;
border: 1px solid black;
background-color: grey;
position: fixed;
}

div#my_menu>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 50px;
line-height: 50px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#container
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
padding-top: 50px;
}

div#my_header
{
width: 100%;
min-width: 100%;
height: 100px;
border: 1px solid black;
background-color: yellow;
}

div#my_header>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 100px;
line-height: 100px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#content
{
width: 960px;
margin: 0 auto;
height: 100%;
min-height: 100%;
border: 1px solid black;
background-color: blue;
overflow: auto;
}

div#col1
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: green;
float: left;
}

div#col1>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#col2
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: orange;
float: left;
}

div#col2>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#col3
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: gold;
float: left;
}

div#col3>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#my_footer
{
width: 100%;
min-width: 100%;
height: 80px;
border: 1px solid black;
background-color: pink;
}

div#my_footer>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 80px;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

EDIT 1

Try this. This works perfect. The Footer sticks to the bottom even when there is not enough content and pushed down when there is more content. Also the verticaly Scroolbar does not appear. Now please don't ask me to make the columns equal height as well.

The HTML Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
    <div id="my_menu">
    FIXED MENU WIDTH 100%
    </div>
    <div id="my_header">
    HEADER WIDTH 100%
    </div>
    <div id="content">
        <p>CONTENT 960px</p>
        <div id="col1" class="content_columns">
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        </div>
        <div id="col2" class="content_columns">
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        </div>
        <div id="col3" class="content_columns">
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        </div>
        <div class="clear_floats"></div> <!-- For Clearing Floats -->
    </div>
    <div class="push"></div> <!-- For Sticky Footer -->
</div>
    <div id="my_footer">
    STICKY FOOTER WIDTH 100%
    </div>
</body>
</html>

The Style CSS

* /* For CSS Reset */
{
padding: 0;
margin: 0;
}

html, body
{
width: 100%;
height: 100%;
}

div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}

div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}

div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}

div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}

div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}

div.clear_floats /* For Clearing Floats */
{
clear: both;
}

div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}

div.push /* For Sticky Footer */
{
height: 70px;
}

Hope this helps.

Defrock answered 3/2, 2012 at 21:17 Comment(4)

Thank you so much for your time! But with your solution I still get unnecessary scroll, even though the content inside the column are less than the height of the screen. Is it possible to avoid this? – Group 5/2, 2012 at 12:15

Thank your very much, I really appreciate your efforts! But in a big screen resolution the content does not stretch to fill our the screen - and also the columns do need to have an equal height (sorry). Maybe I need to find a way to do it with javascript instead? – Group 6/2, 2012 at 9:25

What you can do is, take the above code and ask a new question, but this time only ask how to make the content 100% height as well as equal height columns. I am sure it will be answered with pure CSS solution without Javascript or Jquery. Otherwise I can point you to many JavaScript and Jquery solutions. – Defrock 6/2, 2012 at 10:39

#9159526 – Defrock 6/2, 2012 at 10:55

Yes, what have you tried? This is very basic.

You need to put the 3 columns in a wrapper ( or something else) and the header, fixed nav and footer outside the wrapper. Now, you can make the nav, header and footer 100% width and the wrapper 960px.

Usquebaugh answered 2/2, 2012 at 20:47 Comment(7)

Thank you for your answer, but my problem is to make the columns stretch to full height of the screen, from the bottom of the header to the top of the footer, at any screen size. Any ideas on how to achieve that? – Group 2/2, 2012 at 20:52

they are called equal height columns. Flex columns is one way - vanseodesign.com/css/equal-height-columns - css-tricks.com/fluid-width-equal-height-columns - woorkup.com/2009/10/11/… - matthewjamestaylor.com/blog/… - buildinternet.com/2009/07/… - – Defrock 2/2, 2012 at 21:1

Thanks, but it is not enough for the columns to have an equal height - they also need to be inside a 960 px wide centered container and stretch from the (100% wide) header to the (100% wide) sticky footer – Group 2/2, 2012 at 21:14

yes and I don't see your problem. Let me give you the outline. Make a div#container, give it width: 100% and height: 100%; Make a div#menu, give it width: 100%; position: fixed; Make a div#header, give it width: 100%; make a div#content; give it width: 960px; margin 0 auto; make 3 divs, div#col1, div#col2, divid#col3, give them width: 320px; height: 100%; Use the any Equal Height Columns Techiniques. Make a div#footer, give it width: 100%; Use any sticky footer technique – Defrock 2/2, 2012 at 21:24

@KasperBjerre: And please use @ so that I can get your messages in my inbox and not have to revisit the question to see any updates. – Defrock 2/2, 2012 at 21:28

@Jawad: I have made an example from what you wrote, here muku.dk/example - but I don't think the equal height columns is the right solution - what I want is for the footer to be visible at the very bottom of the page, without scroll, if the height of the content inside the columns is less than the height between the footer and the header. But at the same time I still want the columens to be filled out from the bottom of the header to the top of the footer. I only want scrolling to depend on the height of the content inside the columns. – Group 2/2, 2012 at 22:41

You got it all wrong mate. First there is no doctype. Second there is no width: 100% and height: 100% to the html and body element. Third you are not using any CSS Reset, not even * {padding: 0; margin: 0;}. Fourth you have div#container {height: auto !important; margin-bottom: -50px; Why?. And many other errors. Let me see what I can cook up – Defrock 3/2, 2012 at 19:37

Recommended topics

Hot tags