Sidebar Issue and Sticky Footer

Hello,

Have a couple questions regarding the site I’m currently working on, I put the site up on…

http://modocom.ca/test/tbi/

So what I’m looking for is if there is a lot of content that the sidebar will continue with its gray background all the way down to the footer with the social icons also at the bottom of the sidebar.

I did a mockup of an interior page where you can see that it doesn’t work that way as I can not seem to achieve this, below is the link so you can see what I mean…

http://modocom.ca/test/tbi/single.html

Currently I have the bottom of the sidebar image in the footer, not sure if this is the best way to do it, but seemed logical. Also was wondering if it is possible to make the footer a sticky footer (I believe that is what I’m looking for).

Please let me know if these changes can be made, I appreciate all the help from the great people at Sitepoint…

Thanks in advance,

Mike

Without going into too much detail. A cursory inspection , I didnt have too much time to examine your code or math, leads me to believe you missed a concept here.

Putting the image in the footer is the way to go. But you are going to need to use some sort of faux column technique applied to the wrapper element (this element to wrap the sidebar AND the content) in order for your content and sidebar to be equal.

Since the site is fixed with you can create an image a few px high and the width of your sidebar and #yourContainer {background: url(sidebarBg.gif) 0 0 repeat-y;}

Since your sidebar bg color is solid you could also make #yourContainer the width of your site minus the sidebar, add a left border the bg color and width of your sidebar then apply a negative margin-left to the sidebar (of the the width of the sidebar).

About the sticky footer… This would have been best planned out from the beginning, but from where you stand I would make/find a wrapper in your code that contains EVERYTHING BUT the footer, give that element {min-height:100%; } with a hack for older IE of height:100%… and add a negative margin-bottom equal to the height of the footer, you could add the negative margin to the top of the footer instead… but sometimes that causes issues.

To the IMMEDIATE children of this container I would add padding equal to the height of your footer, so as to make room for the footer… and that should do it.

With table layout, the old way, having the bottom of the sidebar image in the footer would have made sense since tables do not have the equal height column issue that CSS layout has. That’s the problem you are experiencing. I am also interested in solutions that other people might have.

One possible solution would involve changing the structure of your page and using a faux column technique. You could place the green and orange bar and everything above it in one div, then the sidebar and main content in another, both within a containing DIV called #contentWrapper. You can create an image of 240px by 1px which is the color of your sidebar. So, within the #contentWrapper you use the background property to repeat-y the image, and position it flush left in that div. Then the sidebar and Content DIVs have no background color associated with them. That way, the result is a 100% height background color, which looks like an equal height column.

Then, you can keep your sidebar bottom image where it is at. At that point, no matter how much content you place in the Content DIV , the background image of #contentWrapper will continue to extend and you don’t get that white gap.

I am thinking off the top of my head, so maybe someone else might have a better solution.

LOL, what Dresden said.

Thanks guys, I got the faux sidebar working now.

Dresden, would you be kind enough to take a peek at my code to see how I can solve the sticky footer if you have the time to just post what the code would look like as I believe when I tried doing it I failed miserably lol

:slight_smile:

Thanks,

Mike


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			body, html, p ,h1{  margin:0; padding:0}
			body {background: url(yourbg.gif) cyan;}
			p+p {padding-top:1em}
			/* this are just a general resets.. dont worry about it*/
			
			/* this is the important part*/
			body, html{height:100%; }
			#everythingBut {min-height:100%; background:#ccc; margin-bottom:-4em; }
	
			* htm #everythingBut, *+#everythingBut{height: 100%; }/*cuz IE sucks*/
			#fut {height: 4em; background: pink;}
			#content{padding-bottom: 4em;  background: url(sidebar.gif)repeat-y; overflow:hidden }
			/*centers stuff*/
			#everythingBut , #fut p{max-width:800px; margin:0 auto }
			
			
			/*this is just styling ans sidebar*/
			#sidebar{float: left; background:orange; width:255px; }
			#main {margin-left:255px}
			#sidebar p {padding-right:20px;}
			#main p {padding-left:20px;}
			h1 {text-align: center; background: #000; color:#fff}
		</style>
	</head>
	<body>
			<div id="everythingBut">
				<h1>Header div and stuff</h1>
				<div id="content">
					<div id="sidebar">
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
					</div>
					<div id="main">
						<p>Simplified version of what I tried to explain earlier. btw, keep margin collapse in mind when putting  other elements inside any of these elements ( not thaT take care to 0 some vertical margins.. (just google "margin collapse if you are curious)</p>
						<p>Paul O'B  also has some interesting demos on his site. I have simplified this here and touch on tangential topics. if you are curious see them <a href="http://pmob.co.uk/">here</a>. Please forgive my typos </p>
					</div>
				</div>
			</div>
			<div id="fut"><p>this would represent your footer. since I expect it to be3 lines high I am using 4 ems or so for a height.</p> </div>
	</body>
</html>


Hopefully you can see what I mean here. Also, check out Paul’s demo page ( link in the code) he has tons of sticky footer versions.

Thanks,

I think I did something really wrong, here is the homepage…

http://modocom.ca/test/tbi/

It’s not even close, and the footer is behind the main content for some reason…

And then heres the inside page…

http://modocom.ca/test/tbi/single.html

This is closer to what I’m looking for but for some reason there is a large white gap now after the sidebar and before the footer, and the main content is still infront of the footer if you make the browser window smaller.

*EDIT - I fixed the sidebar issue so the single.html (inside page) seems to work correctly, other then the text going overtop of the footer so that needs to be solved. But the homepage is still a mess.

Ok sorry got it figured out on the homepage, but now on the homepage my sidebar isn’t correct.

*EDIT - Ok I got it so the footer is ahead now. Forgot my position: relative on my footer but now have a problem that the when the window is smaller the scrollbar doesnt show up if some of the content needs to be scrolled, I think I might have missed something.

Ok I cant seem to edit my previous posts now, but solved the sidebar issue. Ok wait the footer works correctly on the inside page but on the homepage it acts as a fixed footer and when you shrink the window it goes overtop of the content. The footer should never go overtop of the content, should be able to scroll down to read the content like on the inside page.

Also, my social icons how can I fix these so the stay right at the bottom of the sidebar just above the footer. Should I put it in the footer and just give it a negative margin? Because the position: absolute is doing some wonky things when the window is smaller and you have to scroll.

Thanks for all the help

:slight_smile:

wow… got lost on your changes there…

anyway… remember, since you have a container for your main+content ( which also holds you faux column image) you need to clear the container element)… OVERFLOW:HIDDEN;

I would also check you structure in order to do a sticky foot. Essentially (to keep this simple) your body tag should only have two direct children : wrapforeverythingBUT foot + foot. If you didnt do it that way you are bound to have problems.

You could wrap (or even w/o) your Soc Icons and AP them. Depending where on the flow they need to be. If semantically they belong in the content, then put them separately after the sidebar/main. Give the wrapper position:relative; and the icons position:absolute; use top/bottom/left/right to place them pixel perfect where you want them.

If semantically they belong in the footer, do the same thing except RP the footer…

Ok, I thought wrong in Safari and Chrome the sticky footer isnt working properly at all only in Firefox for the inside page. And the homepage sticky footer doesnt work at all in any browser.

The social icons I ended up solving that problem so just need to solve the sticky footer so it works on homepage and inside pages properly.

Thanks for the help, really having issues with this and its beginning to frustrate me alot, because it appears I did everything correct but just not working arrrrgh.

Mike

Here is a great sticky footer tutorial, that I use: http://www.search-this.com/2009/10/09/css-a-sticky-subject/

The basics is like this: you have two divs, one for footer, the other for everything else, header, content, everything, call it #pageWrap, for example. Set the #footer height to whatever you want, say 200px. #pageWrap gets a min-height:100%. Oops that pushes #footer down past the fold because pageWrap is taking up 100%. To make room for #footer, you add margin-top: -200px to pageWrap. Ooops! Now #pageWrap is disappearing, but the #footer is back. So you add a border-top of 200px solid to the #pageWrap to bring that back down into the fold.

Now the only thing is that if you have content that exceeds the height of footer, or if you change the footer height in CSS, you have to make the adjustments to the #pageWrap to compensate. Usually footers rarely change anyway though, and those changes are pretty darn easy to make.

As others have said :slight_smile:

You can only have the main wrapper with min-height:100% as all subsequent elements collapse to auto. The negative margin should only be on the main wrapper (#background) and not on inner elements. Then the way you are using the sticky footer you need to offset the negative margin by using padding on the last element on the page so that the content doesn’t overlap the footer.

Add these changes.


/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* negate effect of float*/
}
#main:after,#wrapper:after,#background:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#background {
	background: url(http://modocom.ca/test/tbi/images/bg.jpg) no-repeat top center #FFFFFF;
	min-height: 100%;
	margin-bottom:-330px;
	/*overflow: hidden;*/
	clear:both;
}
/* Structure */
* html #background{height:100%}
#wrapper {
	width: 960px;
	margin: auto;
/*	min-height: 100%;
	margin-bottom:-330px;*/
	padding-bottom:330px;/* stop overlap due to negative margin*/
}
/*
* htm #wrapper, *+#wrapper, htm #background, *+#background { height: 100%; }
 Header 
*/

#sidebar {
	float: left;
	width: 240px;
	padding-bottom:70px;
}


Here is a great sticky footer tutorial, that I use: http://www.search-this.com/2009/10/0...ticky-subject/

Thanks :slight_smile:

The updated version is in the CSS FAQ now.

Cool, you know one thing I have noticed is that if there is a background image in the pageWrapper and you do a negative margin to pull it up, and then add the border-top to bring it down, you also need to adjust the background image positioning too. That’s less important if you are tiling a small image, but for a bigger image with no repeat, it gets cut off too.

That’s obviously not a problem if the background is in the BODY, but sometimes I have needed it in a DIV along with the content.

Yes you need to take that into account but just adjusting the top position of the image (background-position:0 100px) is enough because the image will start at that point and even repeat from that point if needed (but will repeat in both directions but that is of little matter).

Excellent, Your help worked great for the homepage Paul.

But on my interior page, I seem to be having an issue as even though there is not enough content to fill up full browser window for a scrollber, the scrollbar still shows. Not sure if I worded that correctly. But take a look please when you got the chance…

http://modocom.ca/test/tbi/single.html

Thanks,

Mike

*EDIT - I believe it has to do with 330px padding-bottom on the wrapper div.

What have you done with the main element that is controlling the whole thing?

#background is missing and is the element that controls the 100% height and the sticky footer. You need to add it back in and the page will work (except you need to remove the padding bottom from page-content).

If you removed #background because you didn’t want the image then just add a class to the body on that page only and remove the image.



<body class="noimg">
<div id="background">

.noimg #background{background:transparent}

You could of course make the whole thing work with #wrapper instead but as you are using all those elements on the other page it would mess it all up so best just to keep to the same structure as the other page.

Try adding min-height:100% and margin-top: -330px to #wrapper. Then to #header, add padding-top:330px to bump everything back down.

Thanks Paul,

Made that fix. It reduced the scroll but as you can see there is still alot of white space after it.

Any idea how to solve that?

Thanks,

Mike

here is an alternate solution, actually the same as above but tweaked specifically to what you have mentioned:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			body, html, p ,h1{  margin:0; padding:0}
			body {background: url(yourbg.gif) cyan;}
			p+p {padding-top:1em}
			/* this are just a general resets.. dont worry about it*/
			
			/* this is the important part*/
			body, html{height:100%; }
			#everythingBut {margin:0 auto ; min-height:100%; max-width:545px; background:#ccc; margin-bottom:-4em; border-left:255px orange solid; }
	
			* htm #everythingBut, *+#everythingBut{height: 100%; }/*cuz IE sucks*/
			#fut {height: 4em; background: pink;clear:both;}
			#content{padding-bottom: 4em;  background: url(sidebar.gif)repeat-y;  clear:both}
			#content:after {content: ""; display: block; clear: both;}
			/*centers stuff*/
			 #fut p{max-width:800px; margin:0 auto  ;  }
			
			
			/*this is just styling and sidebar*/
			#sidebar{float: left; background:orange; width:255px; margin-left:-255px}
			#sidebar p {padding-right:20px;}
			#main p {padding-left:20px;}
			h1 {text-align: center; background: #000; color:#fff; float:left:width:100%; margin-left: -255px}
		</style>
	</head>
	<body>
			<div id="everythingBut">
				<h1>Header div and stuff</h1>
				<div id="content">
					<div id="sidebar">
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
						<p>your sidebar stuff would go here, tackle this with a bg image in #content</p>
					</div>
					<div id="main">
						<p>Simplified version of what I tried to explain earlier. btw, keep margin collapse in mind when putting  other elements inside any of these elements ( not thaT take care to 0 some vertical margins.. (just google "margin collapse if you are curious)</p>
						<p>Paul O'B  also has some interesting demos on his site. I have simplified this here and touch on tangential topics. if you are curious see them <a href="http://pmob.co.uk/">here</a>. Please forgive my typos </p>
					</div>
				</div>
			</div>
			<div id="fut"><p>this would represent your footer. since I expect it to be3 lines high I am using 4 ems or so for a height.</p> </div>
	</body>
</html>

The trick is to contain your header ( which changes height from page to page), and your content in ONE wrapper, and make THAT wrapper be the faux bg; in this example I also used the border-property coo acomplish this, as I was hinting to previously, it can just as easily be done with images and padding instead. and then your foot. As I said earlier have ONLY TWO children of the the BODY tag…

The H1 ,again, reperesnt your “header” + “nav” items… replace it with a div and put all your head/nav stuff there. Because this container is min-height:100%… it wont matter if your header changes or not as this is part of the total calculation. So no need for different styles per page etc…

As with any sticky foot…you will need to give the footer a fixed height… and create some way of accounting this INSIDE previous sibling container… in this case, since I did that border method for faux column ( which means i CANT use overflow auto to clear the sidebar float…) I use the #everythingbut:after pseudo element to kill two birds with one stone. I give that pseudo element clear:both and a height equal to my footer.

Yeah, IE sucks. But not that much once you get to know it. Since IE<8 do not hande :after… you can do a condition comment for those users:


<!--[if lt IE 8]>

#content {	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	
#content .after { display: block; clear: both;}

<![endif]-->

Alos, this way you can get rid of that #background element… and place your bg directly in the body tag…
Again, once you decide if the Social media icons are content that is SEMANTICALLY part of the main content(???), sidebar, foot, or separate… I would give the parent of the social media icons container ( which should be in a list, btw) relative position then AP those into place.