4

I want to make a one Column Layout with 3 section

Section 1: Header Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel Section 3: Footer that always resides at the bottom of the browser window.

The Problem:

I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.

Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.

Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.

thanks!

http://jsbin.com/ixipug/1/edit

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height: 100%;

}

body {

    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;


}

#containerHeaderContent {
   min-height:100%;
   height: auto;
   height: 100%;
   margin: 0 auto -1.5em;
}

.push {
height: 1em;
}

.header {
    background-color: aqua;
    padding-top:20px;
    }


.subheader-left {

    float:left;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}


.subheader-right{

    float: right;
    font-family: sans-serif;
    font-size: 12px;
    padding-right: 20px;}

.middleSection {
    padding-top: 10px;
    clear:both;
    width:100%;
    height auto;
    background-color: #e8e7e7;

}


.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;

}
.bottom-left {

    float:  left;
    font:   sans-serif;
    left:   20px;
}


.bottom-right {

    float:      right;
    right:      15px;
    font-style: italic;
    color:      #8e8e8e;
    font-size:  11px;
}

</style>

<title>XYZ</title>

</head>
<body>

<div id="containerHeaderContent">

    <div class="header">
        <div class="subheader-left">XYZ</div>
        <div class="subheader-right">LOREM</div>
    </div>

 <div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div> 

<div class="push"></div>

</div>

<div class="bottom">
    <div class="bottom-left">
        <span class="about">
            <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:info@info.eu">info@info.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


        </span>
</div>


<div class="bottom-right">
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span>
</div>
</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

</body>
</html>
Roland
  • 1,908
  • 4
  • 21
  • 34

2 Answers2

8

2018 update

use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:

body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

article {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="page">
  <header>header content</header>
  <article>main content</article>
  <footer>footer content</footer>
</div>

No need to use tables! Some simple css will do nicely.

DEMO: http://jsbin.com/azivip/2/edit

Html Markup:

<body>
  <div id="content">
    <div id="header">
      This is the header
    </div>
    <div id="inner">
      This is the body
     </div>
    <div id="footer">
      this is the footer
    </div>
  </div>
</body>

CSS:

body{
  height:100%;
  padding:0px;
  margin:0px;
}
    #content{
      position:relative;
      bottom:0px;
      width:100%;
      height:100%;
    }
        #header{
          position:relative;
          bottom:0px;
          width:100%;
          height:100px;    /* Edit for height of header*/
          background:#f00;
        }
        #inner{
          width:100%;
          text-align:center;
          position: absolute; 
          top: 50%;
          display: table-cell; 
          vertical-align: middle;
        }
        #footer{
          position:absolute;
          bottom:0px;
          width:100%;
          height:100px;   /* Edit for height of footer */
          background:#0f0;
        }

In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.

var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
Community
  • 1
  • 1
Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
  • I suppose Michael's solution is good, it only needs to change the footer to fixed? – Stano Aug 14 '12 at 22:59
  • 1
    It's neat, I don't know why I didn't think of that :) +1 for a non-`table` solution. – Chris Aug 14 '12 at 23:04
  • very nice! thanks! one question though - is it possible for multiline content in the middle section to autom. be centered, top:50% works great for a single line of text, but not for a picture or multiple lines. Thanks again! – Roland Aug 14 '12 at 23:15
  • You can use: `img { margin: 0px auto; }` for centering images horizontally. And also have a look here: http://pastebin.com/JRFMyGUf – Stano Aug 14 '12 at 23:19
  • 1
    @Roland First, keep `top: 50%`, then you can use some Javascript/jQuery to "pull it up" in the right amount. `var mrgntop = - Math.floor($("#inner").height() / 2); $("#inner").css({"margin-top":mrgntop})`; – Chris Aug 14 '12 at 23:22
  • @Stano I **think** Roland was talking about vertical centering, not horizontal. – Chris Aug 14 '12 at 23:32
  • @Abody97 Yes you're right, only I can't imagine, what image he wants to center vertically. For what purpose? But you're right, javascript is probably the only possible solution here. Btw, forgot to add z-index in that paste. (updated). Well, ok folks, have a good time! :) – Stano Aug 14 '12 at 23:37
1

<table> is what you need to use in this case. The HTML will look like this, basically:

<table class = "wrapper">
    <tr><td class = "header">I'm the header.</td></tr>
    <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
    <tr><td class = "footer">I'm the footer.</td></tr>
</table>

Example CSS:

html, body, .wrapper {
   height: 100%;   
}
.header {
    height: 100px; /*This value can be anything*/
}
.content {
    text-align: center;
}
.footer {
    height: 100px;
}

Demo: jsFiddle. Note how the content is centered both vertically and horizontally.

Hope that helped!

Chris
  • 26,544
  • 5
  • 58
  • 71
  • thx! but isn't there a way to do this with CSS? (scratches head) – Roland Aug 14 '12 at 21:27
  • @Roland I don't think there's a way to do this using pure CSS, unfortunately, unless you can use Javascript, too. But I think that's unnecessary -- using Javascript has way more overhead and "cost" than using a table, IMHO. – Chris Aug 14 '12 at 21:30
  • Tables for layout - yes or no? http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Stano Aug 14 '12 at 22:47