Hi,
here is my problem and this is something I would like to learn how to do for ANY website I design :
how to make the footer adapt to the height of the content?
Basically when all my divs are in place it’s great, then when I add content that is longer/higher than the div it is in, the content expands as it should BUT the footer remains in the same place, ie it doesn’t get pushed down with the height of the content.
I think this requires a .push but no matter where i put it in my html (before the footer, before the content, before the header, well i have tried ANYWHERE) and i give it the same height as my footer it does not work.
So below is the html i have and the css to go with it without any push added in so you can see what i have built. I have made a content with 4 columns and i have purposefully made the third column very long at 800px to see how the footer would react.
I have used only divs with NO absolute and NO relative positionning.
HTML :
<body onload=“MM_preloadImages(‘images/contact-hover.jpg’,‘images/work-hover.jpg’)”>
<div id=“header”>
<div id=“logo”></div>
<div id=“languages”></div>
<!-- end header –></div>
<div id=“container”>
<div id=“menu”></div>
<div id=“gallery”></div>
<div id=“content”>
<div id=“column1”>111111</div>
<div id=“column2”>2222222</div>
<div id=“column3”>33333333</div>
<div id=“column4”>44444444</div>
<!-- end content –></div>
<div id=“social”></div>
<!-- end container –></div>
<div id=“footer”></div>
</body>
css :
@charset “utf-8”;
/* CSS Document */
a img {
border: none;
}
*{
padding: 0;
margin: 0;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #471619;
}
html,body {
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(images/bgd.jpg);
background-repeat: repeat;
}
#header {
background-color: #6F6;
background-repeat: no-repeat;
height: 167px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#container {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#logo {
background-color: #969;
background-repeat: no-repeat;
float: left;
height: 167px;
width: 292px;
}
#languages {
background-color: #C03;
background-repeat: no-repeat;
float: left;
height: 30px;
width: 292px;
margin-top: 120px;
float : right;
}
#menu {
background-color: #696;
height: 42px;
width: 950px;
}
#gallery {
background-color: #FFF;
height: 360px;
width: 950px;
}
Content {
background-color: #F90;
height: 276px;
width: 950px;
}
#column1{
background-color: #009;
padding-right: 10px;
float: left;
width: 227px;
}
#column2{
background-color: #36C;
padding-right: 10px;
float: left;
width: 227px;
}
#column3{
background-color: #99C;
padding-right: 10px;
float: left;
width: 227px;
height:800px;
}
#column4{
background-color: #3CF;
float: left;
width: 237px;
}
#social {
height: 96px;
width: 950px;
background-color: #099;
background-repeat: no-repeat;
}
#footer {
height: 200px;
background-color: #3F3636;
width : 100%;
}
This is obviously simple but I am learning a lot at once and would really need to know this basic thing once and for all so I can do this for any site. Most searches i do on this come up with the sticky footer which is not what i want is it as my content is longer than the screen not shorter?
Many thanks to all in advance
Claire