I am quite new to CSS and HTML so please excuse the noobness.
What I am trying to do is to get the main area of my website to resize according to the amount of text it contains in it. I have searched and searched, but have been unable to find suitable answers. One thing I have tried is putting each of the ‘sections’ into a table, but I could not get it to work.
Any help is greatly appreciated thanks!
Due to posting restrictions I am unable to post the image directly:
http://img402.imageshack.us/img402/6084/sitevuc.png
Here is the HTML:
<body>
<div id="header"></div>
<div id="main"><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<div id="footer"></div>
</body>
Here is the CSS:
#header {
background: url(images/bg_pages.png) repeat-x;
min-height: 973px;
min-width: 1680px;
}
#main {
background:#fff;
min-height: 100px;
min-width: 1680px;
}
#footer {
background:url(images/footer_pages.png);
min-height: 51px;
min-width: 1680px;
}
http://ryanfait.com/sticky-footer/
Here’s a few lines of CSS that do the trick. Found this just a few days ago.