footer stick and content height 100%

cowgirlexpressions · #1 (**permalink**) 06-12-07, 02:26 PM

I just can't seem to get both to work on one page. Heres the code I'm working with:

css Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}
 
div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;
    background:#f0f0f0;
    
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
 
    min-height:100%; /* real browsers */
}
 
div#header {
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
}
 
div#content {
    position: relative;
    width: 760px;
    margin: 0 auto;
}
 
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
}
 
 
#col-one {
    float: left;
    width: 380px;
    background-color: #999933;
}
#col-two {
    float: left;
    width: 180px;
    background-color: #6666CC;
}
#col-three {
    float: left;
    width: 180px;
    margin-right: 10px;
    background-color: #FFCC99;
}
 
.clear_both {clear: both;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test 3</title>
</head>
<body>
 
    <div id="container">
 
        <div id="header">hhhhh    </div>
 
        <div id="content">
          <div id="col-one">    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p>
 
<p>40</p>
</div>
          <div id="col-two">2</div>
          <div id="col-three">3</div>
          <div class="clear-both"></div>
        </div>
 
        <div id="footer">fffff    </div>
 
    </div>
 
</body>
</html>

Live example: http://www.aceservermanagement.com/j...mgmt/css3.html

Can anyone help me figure out how to get the footer to stick to the bottom with little content and expand with more content? I think it looks ok on IE but not working good in FF (just sticks the footer to window and then extra content expands behind the footer and the content div doesn't stretch). Thanks!!! I appreciate all help!!!

jfulton · #2 (**permalink**) 06-14-07, 11:00 PM

Your link is dead, but it sounds kind of like you want to use 'fixed' position? IE6 can't handle this, but there are lots of work arounds.

http://www.google.com/search?q=IE6+fixed+position

job0107 · #3 (**permalink**) 06-15-07, 03:36 AM

This will do what you want:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
body {
    background:gray;
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
    margin:0px;
}
#container {
    width:100%;
    background:#f0f0f0;
    border-collapse:collapse;
}
.td {
    height:575px;
    margin:0;
    vertical-align:top;
}
#header {
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    padding:0px 10px 0px 10px;
}
div#content {
    width: 760px;
    margin:auto;
}
div#footer {
    padding:0px 10px 0px 10px;
    background:#ddd;
}
#col-one {
    float:left;
    width: 360px;
    padding:5px 10px 5px 10px;
    background-color: #999933;
}
#col-two {
    float:left;
    width: 160px;
    padding:5px 10px 5px 10px;
    background-color: #6666CC;
}
#col-three {
    float:left;
    width: 160px;
    padding:5px 10px 5px 10px;
    background-color: #FFCC99;
}
.clear_both {clear: both;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test 3</title>
</head>
<body>
 <table id="container" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <div id="header">hhhhh</div>
   </td>
  </tr>
  <tr>
   <td class="td">
    <div id="content" >
     <div id="col-one"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p></div>
     <div id="col-two">2</div>
     <div id="col-three">3</div>
     <div class="clear_both"></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div id="footer">fffff</div>
   </td>
  </tr>
 </table>
</body>
</html