0

I'm trying to divide a page into 3 sections. A header, body and a footer. I found this blog post which comes close to what I need. But the header and footer with his approach are sticky'd to the window when you scroll up or down.

Further more I want an extra div inside the body section which is centred horizontally and vertically with a fixed width of 600px. And the height should be auto but not overlapping the header or footer. So a padding should be between those 2 sections as well.

I used his approach for the centring part which works pretty good. But I'm using Twitter Bootstrap 3 as well. And I never get the result I want.

Can someone help me out with at least the basics for this to work without TB3 so I can figure it out myself from that point to make it work with TB3?

Thanks in advance!

[EDIT] To sum it all up what I want is:

  1. A page divided into 3 sections where the footer and header do not stick to the window;
  2. Centring a div inside the body section with a fixed width and a growing height that should not overlap the header or footer;

[EDIT 2] Sorry, I forgot to mention that the header and footer have a fixed height of 65px.

Community
  • 1
  • 1
Quoter
  • 4,236
  • 13
  • 47
  • 69

3 Answers3

2

Without knowing how high the inside div's height will be, and that the height will be variable, it's very difficult to create a one-size-fits-all solution, especially considering that different devices and computers have different screen sizes and resolutions. Added to this problem is that your header and footer may also be of variable height, so that also complicates things.

To get around these quirks, and have better control of your varying div height and where it sits on the page, I'd consider using JavaScript to control its position. This way, you can monitor when its height changes (depending on what you're planning on doing), and move it dynamically depending on its current height.

In the following example, I'm using jQuery to get the JavaScript done easily. You can download from their site here, and just include it in your code.

Here's a basic example (HTML first):

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

Then some CSS:

html, body {
    height: 100%;
    min-height: 400px; /* to cater for no element 'collision'... */
    margin: 0;
    padding: 0;
    position: relative; /* to keep header and footer positioned correctly... */
}

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

#container {
    background-color: red;
    width: 600px;
    height: 40%;
    position: absolute;
    left: 50%;
    margin-left: -300px; /* 50% over, then move back 300px to center... */
}

#footer {
    background-color: orange;
    height: 65px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

And finally, your JavaScript. Put this in the <head>...</head> section of your HTML. I've tried to comment as much as possible, but please let me know if anything's unclear:

<script src="./path/to/jquery.js"></script>
<script>

    // this will run this function as soon as the page is loaded...
    $(function(){

        // bind the resize event to the window...
        // this will call the 'centerMyContent' function whenever the
        // window is resized...
        jQuery(window).bind('resize', centerMyContent);

        // call the 'centerMyContent' function on the first page load...
        centerMyContent();

    });

    // the actual centring function...
    function centerMyContent(){

        // get the body and container elements...
        var container = jQuery('#container');
        var body = jQuery('body');

        // work out the top position for the container...
        var top = (body.height() / 2) - (container.height() / 2);

        // set the container's top position...
        container.css('top', top + 'px');

    }

</script>

I hope this helps get you on the right track! Successfully tested in Chrome, Firefox, and Internet Explorer 7, 8, 9 and 10.

Chris Kempen
  • 9,491
  • 5
  • 40
  • 52
  • Thank you very much Chris, I forgot to mention that the header and footer have a fixed height of 65px. My original post has been updated with this info. The only variable height in this situation, is the `div` inside the body which is centralized but this `div` does have a fixed width. Does this changes things? – Quoter Oct 14 '13 at 09:55
  • No problem @Quoter - I've updated my answer, adding in 2 more lines of CSS for the `html, body { ... }` styles, and now it should cater for your requirements perfectly. The fixed width does help, and although the varying height makes things a bit more complex, I think with the JavaScript above and the `min-height` CSS property for the `body` element, you should be winning now. – Chris Kempen Oct 14 '13 at 10:02
  • Great! I'll test it out at home and mark it as answered if it works. But in the mean time, one more question if you don't mind. In my question I referred to a post here on stackoverflow which uses `webkits`, `moz-box` and `box-pack` etc. I don't see you using them in this example. In which situation would you use them? – Quoter Oct 14 '13 at 10:22
  • A quick Google produced [this as a first search result](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-pack), but I'd be tempted to create a new question on SO for this topic ;) – Chris Kempen Oct 14 '13 at 13:01
  • I've been reading about it a few days for now. I couldn't really find an article that describes them good enough for me to have a feeling about how to use them. But thanks! – Quoter Oct 14 '13 at 13:55
1

Since you're using Twitter Bootstrap 3, you can start with the "Sticky footer navbar" template which is in the examples folder in the zip file you get from http://getbootstrap.com/ homepage.

Getting rid of the sticky navbar: open the index.html and go to row 31, it has this:

<div class="navbar navbar-default navbar-fixed-top">

Just remove the navbar-fixed-top from the class attribute.

Making container 600px wide: Create your own css file, include it in your HEAD part of the index.html and add there

#wrap > .container {
    width: 600px;
}

You also need to add mediaqueries to overwrite the basic tb3 styles for smaller viewport-sizes and add that 600px there. So below that type:

@media (max-width: 1199px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 991px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 767px) {
    #wrap > .container {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #wrap > .container {
        width: 100%;
    }
}

those 100% widths are there because you'll lose the responsive width for your site if you force the page to be 600px wide under that width.

And the last part, centering vertically. Are you sure you need it? How much there will be information on the page? Does it vary much? What happens when you view the site for example with mobile device? You can achieve it using HTML & CSS only adding couple of more divs and some css.

In the index.html file wrap the container div like this:

<div class="outercontainer">
   <div class="middlecontainer">
      <div class="container">
        Content
      </div>
   </div>
</div>

And change the #wrap > .container part of the CSS to:

.outercontainer {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}

.middlecontainer {
  display: table-cell;
  padding: 65px 0; /*For your header and footer*/
  vertical-align: middle;
}

.container {
  height: auto;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}

Here's a Codepen of the vertical centering: http://codepen.io/anon/pen/Gposw

You may need some tweaks to get it work like you want it but using these gives you good start.

mMoovs
  • 934
  • 9
  • 18
  • Thanks mMoovs! Looks great. You got me thinking about vertically centre. I think a padding/margin between the header and footer is enough and just horizontally centre the `div`. Think I got the vertically centre idea from that sticky header and footer which I didn't want. But if they don't stick to the window than vertically centring is not needed! How would that look like in your answer with this new info? – Quoter Oct 14 '13 at 11:26
  • Just forget those 3 divs codes and just go with the basic .container div. That should do it. – mMoovs Oct 14 '13 at 12:08
  • You said 3, but i'm guessing you only meant 2 .middlecontainer and .outercontainer right? And how did you define the footer section? – Quoter Oct 14 '13 at 13:53
  • I meant the three latter CSS codes. So give .container only the width defition. And the footer doesn't need anything special, it stays at the bottom by the TB3 default CSS'. Of course you can give it your own colors and everything. – mMoovs Oct 14 '13 at 17:00
0

Try:

JavaScript:

<div class = "row-fluid">
 <div class = "header">
 </div>
</div>

<div class = "row-fluid">
 <div class="container main">

 </div>
</div>

<div class = "row-fluid">
 <div class = "footer">
 </div>
</div>

CSS:

.header, .footer {
height: 65px;
}

.container.main {
width: 600px;
}
Igl3
  • 4,900
  • 5
  • 35
  • 69