ansaurus

Question

DIVs anchored to top and bottom of parent div

Answer 1

+2 A:

If I understand your question correctly, you require some really basic css.

body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }

Your div's are not floated, so will stack on top of each other like pancakes.

If you want the footer to be "sticky", see here for a solution... http://ryanfait.com/sticky-footer/

superUntitled 2009-05-15 14:13:33

Answer 2

A:

If im correct your asking for the header and footer to stick top and bottom.

If so this is what you need.

See Here

Good Luck

Lee 2009-05-15 14:39:38

Answer 3

+1 A:

Here you go:

Example page - footer sticks to bottom

this will have the content right
between the footer and the header.
no overlapping.

<html>
<head>
    <meta name="generator" content="HTML Tidy, see www.w3.org" />
    <title>footer at bottom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <style type="text/css">
  /* commented backslash hack \*/ 
  html, body{height:100%;} 
  /* end hack */
  html,body{ margin:0;padding:0; font-size:1.2em; text-align:center; }

  .header{ height:200px; background:lightblue; }
  #outer{ min-height:100%; margin-bottom:-50px; height:auto; }
  * html #outer{height:100%;}
  #footer { width:100%; clear:both; height:50px; background-color: lightgreen; color: #000; }
  #clearfooter{ clear:both; height:50px; }
  div>p { margin:0} 
  html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */

 </style>

</head>
<body>
    <div id="minHeight"></div>
    <!-- Safari hack -->

    <div id="outer">
        <div class="header">Header</div>
        <p>content goes here</p>
        <div id="clearfooter"></div>
    </div>

    <div id="footer">
        Footer
    </div>
</body>

vsync 2009-05-16 18:23:32

ansaurus

tags:

views:

answers:

DIVs anchored to top and bottom of parent div

related questions