SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to get background color of main content and sidebar to bottom (no footer)

    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
    Code:
    <!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>
    and CSS:
    Code:
    @charset "utf-8";
    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%;
    	height:100%;
    	max-width: 1260px;
    	min-width: 780px
    	background-color: #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;
    }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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/cod...ooter-demo.php

    Code:
    <!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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh ya forgot about that. Here is one way. Try this and post back if you hit a wall. http://www.visibilityinherit.com/cod...ns-withcss.php

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Based on your post, the following should do the trick. The technique is from a recent post by Paul O'Brien
    http://www.sitepoint.com/forums/show...=1#post5272639

    .content and .sidebar floats have been deleted.

    IE8+

    Code:
    @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 {
        display:table;         /* added */
        width:80%;
        height:100%;           /* not min-height */
        max-width:1260px;
        min-width:780px;
        background:#FFF;
        margin:0 auto;
    }
    .sidebar1 {
        display:table-cell;    /* added */
        width:20%;
        vertical-align:top;    /* added */
        background-color:#005BAA;
        padding-bottom:10px;
        padding-top:20px;
    }
    .content {
        display:table-cell;    /* added */
        vertical-align:top;    /* added */
        padding:10px 0;
        width:80%;
    }
    img#logo {
        background-color:#ddd;
        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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •