I have seen a couple other posts similar to mine, so I’m sorry for asking same question again. However, I am really a massage therapist trying to be a web developer for my own site. Thanks for your patience and help in advance. I am trying to get the blue and white background color of sidebar and main content all the way to bottom of viewport. Some of my pages will have more content than others, so in some cases it won’t be a problem. However, on the home page, there is only a small amount of text in content div, and only the nav in sidebar. Any help would be much appreciated.
My code is as follows:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>University Neuromuscular Massage</title>
<link href="main.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Meet Our Therapists</a></li>
<li><a href="">Services</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<img src="_images/UNM_logo.jpg" alt="University Neuromuscular Massage" name="logo" width="610" height="417" id="logo">
<h2 id= "tagline">Restoring Balance, One Massage at a Time</h2>
<p>The main focus here at U.N.M. is to help our clients achieve their pain relief goals. All of our therapists are Licensed Massage and Bodywork Therapists in the state of North Carolina, as well as being trained in neuromuscular therapy. This specific approach to the body allows us to tailor each massage to each person's specific needs. Assessing posture and gait (walking process) allows us to target specific muscles and connective tissue that are pulling you out of balance. Once the body is back in balance, your weight is placed back onto your bones instead of forcing your muscles to do all the work of holding you upright.</p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
I added a couple necessities and you were missing a semicolon on the container ID in the css. Here is how to do a sticky footer. Same thing you need aside from the footer. But you still need all this stuff (or most of it anyway) to get it to the bottom. Well in short only two things I guess. height 100% on the html and body and min-height 100% on your container. http://www.visibilityinherit.com/code/sticky-footer-demo.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>University Neuromuscular Massage</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style>
@charset "utf-8";
html, body{height:100%;}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
min-height:100%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 20%;
background-color: #005BAA;
padding-bottom: 10px;
padding-top: 20px;
}
.content {
padding: 10px 0;
width: 80%;
float: left;
}
img#logo {
display: block;
margin:0 auto;
padding-bottom: 15px;
}
#tagline {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
color: #A10C10;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background-color: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #9E9FA3;
color: #FFF;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Meet Our Therapists</a></li>
<li><a href="">Services</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<img src="_images/UNM_logo.jpg" alt="University Neuromuscular Massage" name="logo" width="610" height="417" id="logo">
<h2 id= "tagline">Restoring Balance, One Massage at a Time</h2>
<p>The main focus here at U.N.M. is to help our clients achieve their pain relief goals. All of our therapists are Licensed Massage and Bodywork Therapists in the state of North Carolina, as well as being trained in neuromuscular therapy. This specific approach to the body allows us to tailor each massage to each person's specific needs. Assessing posture and gait (walking process) allows us to target specific muscles and connective tissue that are pulling you out of balance. Once the body is back in balance, your weight is placed back onto your bones instead of forcing your muscles to do all the work of holding you upright.</p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
Eric, Thanks for the rapid response. Your code helped, but not fully resolved yet. The difference I found (correct me if wrong or missed something) but I needed to add min-height:100%; to the .container. That took the white background down to bottom, but not the blue background of the sidebar. It stops at the bottom of nav. This may be a non-issue as I add content to that area, but again, some pages will have more than others. Some will have none at all outside of nav links. I tried to add that same thing to .sidebar but can tell zero difference. Is there something I am missing or goofed? thanks again to all for your help.
Eric, thanks again for the article/info. I think this would help me, however I’m not really wanting to re-write all my code to re-divide everything. Is there a way to modify what is already here to make it work?