CSS Layout Issue with bottom-aligning content

Question

I am trying to create a CSS-based layout that has:

- A dynamically sized banner.
- A content area that should use all available space.
- A footer that aligns against the bottom of the page.

Currently, I have this. However, my challenge is working in the content area. Within the content area, I need to show:

- A dynamically sized header.
- A content area that uses all available space.
- A footer that aligns at the bottom of the content area, but above the footer mentioned above.

Altogether, I want to create a screen that looks like this:

+------------------------------------+
|            Banner                  |
|                                    |
|------------------------------------|
|            Header                  |
|------------------------------------|
| Some Content                       |
| This needs to be dynamically sized |
| to fill all remaining content      |
|-------------------------------------
|           Toolbar                  |
|------------------------------------|
|            Footer                  |
+------------------------------------+

Currently, I have the following

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

  <style type="text/css">
    html, body{
      height: 100%;
      overflow: hidden;
    }

    body {
      padding: 0;
      margin: 0;
      font-size: .85em;
      font-family: Arial, Verdana;
      color: #232323;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div id="banner" style="width:100%; background-color:Black; color:White;">[Banner]</div>

  <div id="content" style="width:100%; height:100%; background-color:Gray; margin:0px 8px 0px 8px;">        
    <h2>Header</h2>

    <div id="contentArea">
      <div id="mainContent" style="background-color:Silver;">The main content goes here.</div>
    </div>

    <div id="toolbar" style="padding:8px 0px 8px 8px;">
      <input type="button" id="refreshButton" value="Refresh" />
      <input type="button" id="addButton" value="Add" />
    </div>
  </div>

  <div id="statusBar" style="background-color:black; color:White; width:100%; position:fixed; bottom:0;">
    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
      <tr>
        <td style="width:33%;">Info</td>
        <td style="text-align:center; width:34%;">Message</td>
        <td style="text-align:right; width:33%;">Miscellaneous</td>
      </tr>
    </table>
  </div>
</body>
</html>

This screen does not render as desired though. From what I can tell, when I set the "content" div height to 100%, it means 100% of the entire screen. In addition, I can't seem to get the "contentArea" div to take up the remaining space, nor can I get the toolbar to be aligned to the bottom. What am I doing wrong? How do I accomplish this?

Don't use inline styling. That's multiplied by 7 when you already have a ` — Madara's Ghost, Dec 07 '11 at 17:06
it's not very clear what you want precisely, take a look at http://jsfiddle.net/ayZuA/ and tell us what has to be improved — ptriek, Dec 07 '11 at 17:15
Basically, the toolbar needs to be its own area. Right now, it appears to be on top of the text in "mainContent" instead of underneath it. Other than that, it looks good. — Phone Developer, Dec 07 '11 at 18:04

score 1 · Answer 1 · answered Dec 07 '11 at 18:00

1

This "sticky footer" technique should help with your footer problems. It will make it stick to the bottom, but will not overlap content like a position:absolute will if the page scrolls.

http://ryanfait.com/sticky-footer/

answered Dec 07 '11 at 18:00

cappone

31
2

score 0 · Answer 2 · answered Apr 25 '13 at 22:03

I believe you are asking how to make a side bar and the content section of a webpage appear to be equal in height without concern for the actual height of the content in either of the aforementioned div sections. If this is true, I believe I have what I perceive to be an easy answer to your dilemma.

Using HTML 5 and CSS 3, this is my proposal.

Starting with the CSS:

body{/*enter in your parameters */ }
.container{/*this div surrounds all the other divs and allows you to give percentage based widths in subsequent divs*/ max-width: 1000px; min-width: 760px; maergin: 0, auto, 0, auto; background-color: #000;}
.extraheight{float: left; width: 100%; height: 100%; background-color: #ccc;}
.header{width: 100%; color: #FFF; background-color: #00f; /*just for demo purposes*/ }
.sidebar{float: left; width: 30%; background-color: #ccc; /*match the background of the extraheight div*/ }
.content{float: left; width: 70%; background-color: #ccc; /*matches extraheight and siderbar colors */ }
.footer{color: #FFF; /* must make sure you clear the floats above */ position: relative; /* IE6 to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ }

Some basic HTML Using the above CSS to illustrate how it works:

    <div class="container">
    <div class="extraheight">
    <div class="header"><h1>THIS IS MY WEBSITE</h1></div>
    <div class="sidebar">
        <p>This where you put your feed or whatever sidebar content you desire</p>
    </div><!-- ENDS SIDEBAR -->
    <div class="content">
        <h2>This is where you place your content</h2>
        <p>My site is the product of my effort and desire to provide each user with an enjoyable visit. We strive to exceed expectation without comprimising any needs. Check back often as our content is constantly changing.</p>
    </div><!-- ENDS CONTENT -->
    </div><!-- ENDS EXTRAHEIGHT -->
    <div class="footer"><p>Put your footer content here</p></div>
    </div><!-- ENDS CONTAINER -->

I don't have enough points yet to provide you with screenshots of how the page displays but I encourage you to give it a try. Most important issue to is to either make the extraheight div the background you want for the sidebar and content divs while making the background transparent in those divs or to make the sidebar and content divs the same background as the extraheight div. The latter being very easy when a solid color is used as the background but the former is necessary with a background that is any but extremely basic.

I hope this provided you with at least a portion of the information you were interested in when you posted. I am still trying to learn how to properly interpret the questions asked by our colleagues that post to this forum. Alas, I am new to this forum, but a quick learner!

Best wishes and success, Steve K

CSS Layout Issue with bottom-aligning content

2 Answers2