Css Single-Column Layout Centered Fixed-Width 100% Height W Header and Footer

  • Home
  • Languages
  • HTML
  • Css Single-Column Layout Centered Fixed-Width 100% Height W Header and Footer

CSS Single-column layout centered fixed-width 100% height w header and footer

Update

Simple way to do it for modern browsers (2015) using display:flex:

html, body {height:100%; padding:0; margin:0; width:100%;}body {display:flex; flex-direction:column;}#main {flex-grow:1;}
/* optional */header {min-height:50px; background:green;}#main {background:red;}footer {min-height:50px; background:blue;}
<header>header</header><div id="main" role="main">content</div><footer>footer</footer>

Device-independent width for readable single column layout

The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:

Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.

html, body {height:100%; padding:0; margin:0; width:100%;}body {display:flex; flex-direction:column;}#main {flex-grow:1;background:#f3f3f3;max-width: 768px;width:100%;margin:auto;}

header {min-height:50px; background:green;}footer {min-height:50px; background:blue;}
<header>header</header><div id="main" role="main">content</div><footer>footer</footer>

CSS layout with header, footer and multiple 100% min-height content columns

While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.

See the fiddle here.

HTML:

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
</head>
<body>
    <table class="outer">
        <tr>
            <td class="header" colspan="3">header</td>
        </tr>
        <tr class="content">
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
        </tr>
        <tr>
            <td class="footer" colspan="3">footer</td>
        </tr>
    </table>
</body>
</html>

CSS:

html, body {
    height: 100%; margin: 0;
}
.outer {
    min-height: 100%;
    height: 100%;

    width: 500px;
    margin: 0 auto;
}
.header, .footer {
    height: 25px; background-color: #999;
}
.content td {
    width: 33%;
    background-color: #eee;
    border-right: 1px dashed #c00;
    vertical-align: top;
}

Overlapping middle contents with header and footer divs

All of your divs are padding-top 30px and 100% - that makes the container 100%+30px high

Try

height:  calc(100% - 30px);

body {  margin: 0;}
#mainContainer {  position: absolute;  right: 4%;  left: 4%;  height: 100%;}
#headerContainer {  width: 100%;  z-index: 10;  position: absolute;  background: #323232;  color: white;  height: 30px;}
#middleContainer {  height: 100%;}
#leftSection {  position: absolute;  float: left;  width: 175px;  background: #71ABD1;  height:  calc(100% - 30px);  overflow: auto;  color: black;  padding-top: 30px;}
#middleSection {  position: absolute;  height:  calc(100% - 30px);  background-color: yellow;  left: 175px;  right: 175px;  color: black;  padding-top: 30px;}
#rightSection {  float: right;  height:  calc(100% - 30px);  width: 175px;  border-left: 1px dotted black;  background: red;  color: black;  padding-top: 30px;}
#footerContainer {  position: absolute;  bottom: 0;  width: 100%;  height: 30px;  background: #323232;  color: white;}
<div id="mainContainer">  <div id="headerContainer">    headerContainer  </div>  <div id="middleContainer">    <div id="leftSection">      leftSection    </div>    <div id="middleSection">      middleSection    </div>    <div id="rightSection">      rightSection    </div>  </div>  <div id="footerContainer">    footerContainer  </div></div>

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

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.

100% Css-layout with header and footer

[See it in action]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }

A centered column without fixed width

Here's an example using a flexbox. No width settings anywhere.

.container {  display: flex;  flex-direction: column;  align-items: center;}
.element {  background-color: lightblue;  border: thin solid blue;}
span:not(first-child) {  margin-left: 1rem;  border: thin solid red;}
<div class="container">  <div class="element">This is text</div>  <div class="element">This is also some text</div>  <div class="element">    <span>And even in different</span>    <span>boxes on the same row</span>  </div></div>

sticky footer and fixed header

Questions: 1

Just put the <div class="footer"> into the <div class="wrapper">

Questions: 2

You use % at your margin and padding. e.g. margin: 0.5% 0 0 0;
And height: 6%; for the .header. This can cause some problems on window resize.

EDIT:

Maybe you want to use some html5?

There are the <header> and <footer> tags. So you don´t have to use a div for everything.

Watch out for IE8 and below. You need some fix to use html5 tags there.


Related Topics

How to Add Default Value For HTML ≪Textarea≫

Using Position Relative/Absolute Within a Td

How Would I Display a Tiff Images in All Web Browsers

How to Choose Between 'Class' and 'Id'

Nesting ≪P≫ Won't Work While Nesting ≪Div≫ Will

How to Animate Underline from Left to Right

Problems With CSS Sticky Footer

Placing Border Inside of Div and Not on Its Edge

What's the Valid Way to Include an Image With No Src

Override Browser Form-Filling and Input Highlighting With Html/Css

How to Display Scroll Bar Onto a HTML Table

Show Youtube Video Source into Html5 Video Tag

Html Parsing of Cricinfo Scorecards

Change Bullets Color of an HTML List Without Using Span

Rounded Cornes (Border Radius) Safari Issue

Putting Images With Options in a Dropdown List

Which Characters Need to Be Escaped in Html

Why Does the Outer ≪Div≫ Here Not Completely Surround the Inner ≪Div≫


Leave a reply



Submit