PDA

View Full Version : Making the sidebar extend to the footer


BarryD
05-06-2009, 03:16 AM
I'm trying to make the sidebar extend down to the footer. I read other posts and have tried wrapping the container division with <div id="wrapper"> Then I added
<div class="clear></div> after the wrapper div. I don't know where in the CSS code to add the class .clear
I tried adding a background graphic to the sidebar, but that did not help. Perhaps, the spry menu is mucking this up?

I tried setting a pixel height for the sidebar; but, I swear, it did strange things to the layout, depending on monitor resolution.

This is a pared-down version of the html program (without the changes, described above). Does anyone have suggestions? Otherwise, the page is fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clarity: Testimonials</title>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
<link href="testimonyStyles-3.css" rel="stylesheet" type="text/css" media="screen" />
<link href="global.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
</div>
<!-- end #header -->

<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a> </li>
<li><a href="#">Who I Work With</a></li>
<li><a href="#">How I Work</a></li>
<li><a href="#">Services &amp; Programs</a> </li>
<li><a href="#">Success Stories</a> </li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Client List</a></li>
<li><a href="#">Speaking Engagements</a></li>
<li><a href="#">Free Resources</a></li>
<li><a href="#">About Ruth</a></li>
<li><a href="#">Contact Form</a></li>
</ul>
</div>
<div id="mainContent">
<p><img src="_images/clarityLogo.jpg" alt="Clarity" name="clarityLogo" width="188" height="75" id="clarityLogo" />
<a href="_include/ Research Study on Teams.pdf" target="_blank"><img src="_images/Starburst_172X140.jpg" width="172" height="140" alt="Get Report" /></a></p>
<div id="mainBanner"><img src="_images/piggy.jpg" alt="Success" name="mainImage" width="312" height="208" class="fltlft" id="mainImage" />

<h1>Bla, bla, bla</h1>
</div>
<div id="subContent">
<h2><strong> Bla, bla, bla </strong></h2>
<p> Bla, bla, bla </p>
<h2> Bla, bla, bla </h2>
<p> Bla, bla, bla </p>
<img src="_images/claritySun.jpg" alt="Clarity" name="claritySun" width="528" height="64" id="claritySun" />
</div>
<!-- end #mainContent -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p> Bla, bla, bla </p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

BarryD
05-06-2009, 03:38 AM
Further information:

@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #bcece0;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixLtHdr #container {
width: 910px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto;
text-align: left;
height: auto;
}
.twoColFixLtHdr #header {
background: #008080; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 175px;
padding-top: 10px;
padding-right: 0px;
padding-left: 5px;
background-color: #46acac;
clear: both;
}
.twoColFixLtHdr #mainContent {
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 180px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.twoColFixLtHdr #container #mainContent img#clarityLogo {
margin-top: 0px;
margin-left: 220px;
padding-bottom: 30px;
}
.twoColFixLtHdr #container #mainContent a img {
margin-top: 5px;
margin-left: 120px;
}
.twoColFixLtHdr #container #mainContent #mainImage {
margin-top: 15px;
}
.twoColFixLtHdr #container #mainContent #mainBanner {
margin: 0px;
height: 230px;
}

.twoColFixLtHdr #container #mainContent h1 {
font-family: "High Tower Text";
font-size: 2.5em;
font-weight: bolder;
padding-left: 20px;
padding-right: 40px;
text-align: center;
color: #008080;
margin-left: -20px;
padding-top: 30px;
padding-bottom: 30px;
}
.twoColFixLtHdr #container #mainContent #subContent {
margin-top: 30px;
}

.twoColFixLtHdr #container #mainContent h2 {
font-family: "High Tower Text";
font-size: 2em;
font-weight: bolder;
color: #008080;
text-align: center;
}

.twoColFixLtHdr #container #mainContent p {
font-family: "Microsoft Sans Serif";
font-size: 1em;
margin-bottom: 0px;
}
.twoColFixLtHdr #container #mainContent #claritySun {
margin-left: 80px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 10px;
}

.twoColFixLtHdr #footer {
background:#008080;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
margin-top: 0px;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-family: "Microsoft Sans Serif";
color: #FFF;
font-size: 80%;
font-weight: bold;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

edbr
05-06-2009, 03:53 AM
clear will in effect make a div appear under the last so not needed after the wrapper.
to make the side bar reach the botton or the content you can add an image in the parent div and it will appear as if the sidevbar does this if the image matches background and colour of the side bar , repeat it down (y)

BarryD
05-06-2009, 04:29 PM
Thanks for your reply and help! I'm going to do this and will let you know the result. I'm not sure if I need to add a wrapper div and don't know if your reference to "parent div" refers to the sidebar div. Ultimately, tho', I will work this out.

BarryD
05-07-2009, 06:42 PM
To edbr -> Thanks for lighting a candle that illuminated my mind. The container div is the parent of sidebar1 div. I followed your advice, and added a background image of matching color with repeating-y to the container. This solved my problem!

However, I don't understand something. Isn't the container div the parent of other divs, as well? Like, the header, body, footer, etc.; so, why doesn't the background image that I added show in those other divs??? If it has to do with "inheritance", why don't the other divs inherit, as well?

edbr
05-08-2009, 01:50 AM
not completely sure what you're asking but if you add adiv in to the container or parent and it has a background coulor or image, it will show that if you do not specify either then you will see the background of the parent div, think thats what you are asking

BarryD
05-08-2009, 04:53 PM
Ultimately, I did not wrap the container div with a "wrapper" div. I did not change the html code, from that shown in my initial post.

What I changed was the CSS for the container div. It is now:
.twoColFixLtHdr #container {
width: 910px;
margin: 0 auto;
text-align: left;
height: auto;
background-color: #FFFFFF;
background-image: url(_images/insertSmall.jpg);
background-repeat: repeat-y;
}

I did not add any divs, anywhere. My only change was to the container CSS.

My question is - (1) looking at the html, isn't the container div the "parent" of other divs, besides the sidebar div? and (2) why did my change to the container CSS affect the sidebar but not other divs?

I'm trying to understand basic parent - child relationships - Thanks for your patience.