I need a little getting my CSS straight for this page:
http://sandbox.carlmercier.com/test.htm
Basically, the left and right sections are filled dynamically. Sometimes the left section will be longer, and sometimes the right one will be longer.
Right now, the footer is at the bottom of the screen, but when the text in either the left or right section gets longer than the browser height, the footer gets in the way (ie: the footer is over the text). You can see this behavior by resizing the browser. I don't want this to happen.
I want the footer to be at the very bottom of the page (bottom of the browser window), but I also want it to move down if there's too much text in the content areas.
Moreover, my page doesn't show up properly in IE (but works great in Firefox), I'd like some help getting it right in all browsers.
People succeed in answering Carl's questions 23% of the time (5 successes in 22 attempts).
Answers by: Zachary Holt
Essentially, you float the left div to the left, float the right div to the right, and then clear them both with the footer, which needs to be in the same containing div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
margin: 0 0 0 0;
background-color: #3fcd41;
color: #333333;
}body a {
color: inherit;
text-decoration: none;
}h1 {
font-family: Trebuchet Ms, Helvetica, Arial, Tahoma, Verdana, serif;
font-size: 17pt;
font-weight: bold;
color: #eeeeee;
margin-bottom: 0;
}h2 {
font-family: Trebuchet Ms, Helvetica, Arial, Tahoma, Verdana, serif;
font-size: 11pt;
font-weight: bold;
margin-top: 7px;
}h3 {
font-family: Trebuchet Ms, Helvetica, Arial, Tahoma, Verdana, serif;
font-size: 11pt;
font-weight: bold;
margin-top: 0;
margin-bottom: 2px;
}#header {
background-color: #ffffff;
position: relative;
height: 100px;
width: 200px;
}#divider {
background-color: #cee570;
height: 5px;
}#mainarea {
padding-top: 10px;
}#leftside {
width: 40%;
padding: 0 20px 20px 20px;
float: left;
}#rightside {
width: 40%;
right: 0px;
padding: 0 20px 20px 20px;
float: right;
}#options {
background-color: #dde570;
padding: 10px 10px 10px 10px;
margin: 10px 0 0 0;
}div.optionsection {
margin-bottom: 15px;
}#footer {
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 20px 0 20px 0;
clear: both;
}#footer a {
padding: 0 10px 0 10px;
}img {
border: 0;
}div.lookupresponse {
margin: 10px 0 10px -8px;
}#domainToCheck {
font-family: Trebuchet Ms, Helvetica, Arial, Tahoma, Verdana, serif;
font-size: 18pt;
padding: 7px 7px 7px 7px;
color: #333333;
border-color: #cee570;
border-style: solid;
border-width: 5px;
margin: 2px 2px 5px -10px;
width: 100%;
text-align: left;}
</style>
</head>
<body>
<div id='header'>
Header logo goes here
</div><div id='divider'></div>
<div id='mainarea'>
<div id='leftside'>
<div id='welcome'>
<h1>My main header</h1>
<h2>Some other text should go here</h2>
</div>
<div id='searchbox'>
<form method="get" action="">
<input name="tbox" id="tbox" class="search" type="text" />
</form>
</div>
<div id='lookupresponse' class="lookupresponse">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed fringilla aliquam lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In commodo imperdiet massa. Suspendisse dolor urna, gravida quis, sodales vitae, pharetra vestibulum, risus. Etiam et nunc. Aliquam a felis. Proin vitae lacus et leo ullamcorper dictum. Nulla in tortor. Curabitur eros. Nullam ornare.Phasellus leo nulla, interdum vel, consectetuer venenatis, placerat quis, quam. Pellentesque vel sem a lectus consectetuer lacinia. Nulla id mi. In sagittis fermentum neque. Morbi justo orci, mattis et, pretium sit amet, tincidunt eu, purus. Nunc diam nisi, tincidunt ut, sollicitudin et, semper sed, velit. Praesent egestas nulla eu magna. Nulla tempor lacus sit amet elit. Integer ut mi sit amet dui venenatis egestas. Nullam rhoncus, lectus ac feugiat blandit, elit justo varius leo, sed eleifend urna erat et tellus. Vestibulum quis metus. Phasellus sagittis purus eget massa. Suspendisse venenatis imperdiet metus. Mauris tempus dui lacinia turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras turpis sem, viverra quis, feugiat quis, dapibus ut, nisl. Nunc rhoncus tortor in risus. Ut pellentesque posuere pede. Phasellus elit.
Sed ut justo. Sed sit amet nulla in tortor eleifend porttitor. Phasellus suscipit. Aenean eros neque, condimentum ac, molestie ut, consectetuer pulvinar, dolor. Curabitur mauris ante, pretium nec, congue id, tempor ut, purus. Sed velit nisl, aliquet a, viverra non, scelerisque vitae, ipsum. Vestibulum eu orci. Aliquam ultrices lorem eget diam. In mauris nunc, congue sit amet, facilisis laoreet, tempus et, nulla. Aenean ultrices. Pellentesque hendrerit mi vitae justo. Sed dapibus imperdiet metus. Vivamus condimentum magna eget justo. Integer vel magna. Aenean nonummy dui. In hac habitasse platea dictumst. Morbi scelerisque nisl vel eros.
Quisque neque magna, ultricies at, mollis sed, molestie sed, tellus. Duis at mauris vel nunc interdum molestie. Suspendisse potenti. Curabitur lectus eros, fermentum quis, ornare id, porttitor non, mi. Praesent ultrices velit at mauris. Suspendisse potenti. Morbi pede libero, bibendum at, tincidunt vitae, accumsan sed, urna. Suspendisse molestie tincidunt ipsum. Fusce iaculis faucibus nulla. Vivamus mollis mauris nec est. Duis nisl nulla, posuere non, euismod vel, hendrerit et, dui. Morbi consectetuer. Phasellus sit amet turpis non mi congue hendrerit. Quisque porttitor, tellus sed malesuada ornare, sem sem congue turpis, sit amet hendrerit urna nunc in odio. Proin semper turpis sit amet urna. Sed aliquam lectus in massa.
Quisque sem lacus, hendrerit a, lobortis non, aliquet vitae, quam. Duis eu sem. Vestibulum ac enim. Nam eget urna sit amet leo imperdiet consectetuer. Vestibulum imperdiet porta odio. Ut ornare justo et purus. Pellentesque suscipit. Proin ac velit quis tellus accumsan viverra. Suspendisse auctor elit eu nisi. Donec enim lorem, adipiscing in, luctus malesuada, rutrum consectetuer, leo. In dictum velit id tellus. Maecenas lobortis leo sed ligula. Quisque dolor tortor, luctus eget, molestie eget, venenatis a, ante. Donec tincidunt neque vel nibh. Sed tristique. Morbi at nulla vitae est tincidunt venenatis. Nullam non mauris. Sed risus lorem, tempus vitae, pulvinar non, molestie sit amet, orci.
</div>
</div>
<div id='rightside'>
<div id='options' class='rounded'>
<div class='optionsection'>
<h3>Bla bla</h3>
<div id='favorites'></div>
</div>
<div class='optionsection'>
<h3>jshkds</h3>
<div id="tldcheckboxes"></div>
</div>
<div class='optionsection'>
<h3>Preferences</h3>
some text<br />some text<br />some text<br />some text<br />
</div>
</div>
</div>
<div id='footer' style='background-color:#527123;'>
<a href='/help'>help, tips and faq</a>
<a href='/about'>about</a>
<a href='/privacy'>privacy policy</a>
</div>
</div>
</body>
</html>
Your solution has those problems:
- the right side should be fixed width
- the footer is not docked to the bottom when there's little content in the main area
You can fix the width of the right side. No problem. It just can't be wider than there is room for (which is why I used %), or else it will wrap. You will probably need to fix the width of the left side, too.
You can set a min-height on the leftside element. That way, it will always be at least 1000 pixels, or whatever.
If you want it to be at the very bottom of the page for every browser window size (if the page is too short), then you will have to do some javascript in the onload(). I can do that for you, but it will require a slightly higher price ;)
this can be done with CSS alone, don't want javascript...
OK. Good luck!