Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Sidebars not tiling on large monitors

Posted on 2011-10-14
13
Medium Priority
?
341 Views
Last Modified: 2012-05-12
Hello,
I am nearly done with this site: http://dev.abeny.cct.edc.org/ 
However, there is one bug that the client reports that I can neither recreate nor fix.

On the clients's very large Mac monitors, using Firefox, there is a big white gap between the content area and the footer.

I know that this is happening because the two sidebars/content area are not tiling the full width of the main content area.  I have resolved this on another page, but I can't figure it out on the home page.


I have a decent sized monitor, but I cannot recreate this issue.  Do you see it?  Any ideas?

Thank you!
0
Comment
Question by:rjunk
  • 8
  • 4
13 Comments
 
LVL 8

Expert Comment

by:twohawks
ID: 36971237
right off, you can recreate this if you open in FF and then resize down (for instance, using ctrl-minus/plus).
I am going to look at it a little more see if I can suss it, but right off the top, first thing I will be looking at is ...does the footer hug the div above, or hug the bottom of the page?
If its ugging the bottom, then you have to manage the height of the section above 'fluidly'.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36971255
When I turn off height:100% for
html, body, .wrapper in style.css the problem goes away here.
0
 

Author Comment

by:rjunk
ID: 36972012
Hi, Thanks for all the info.  I want the site to have a sticky footer, so the only catch with removing the height: 100% is that it seems to come unglued from the bottom of the viewport.  
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:rjunk
ID: 36972022
And, if I understand the sticky footer code correctly, the footer is hugging the div above. But, I could be goofed up about that for sure.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36972329
Yes, sticky footer usually means sticking to the bottom of the viewport, column divs meeting the top of the footer div below,  and when content flows past that you either have your scrollbar appear on an inner column or on the viewport (normal window scrollbar - often, but not always, preferred - just depends).  At first I didn't get that this is what you are after, only the gap problem.  

The thing is, it doesn't seem to me to be quite there yet...

I think I see two issues here before you can actually work the problem (i.e., I don't think its quite there yet)...
#1 - there seems to be a rouge (umated) ending div
#2 - I am uncertain which technique is intended to be employed here (there's a couple), but for typical footer sticky to the bottom of the window I think you need to be working the css with the footer inside the wrapper, not outside of it.  

I would get the divs fixed (validate your code - no unmatched tags, no funky chicken, etc), get settled/focussed on the chosen technique (which one it is) ....and then start working the problem again from there.

If need be, empty the content and work with some really plain content within the structures (head, 2 columns, foot) until all the divs becomes fluid as intended. Then start introducing more complex content... **being sure to cross-browser test every step of the way so troubleshooting doesn't become to convoluted "later" ...deep into it.
0
 
LVL 9

Expert Comment

by:user_n
ID: 36973193
Try to remove padding-bottom: 150px;

.main {
    background-image: url("images/beaker-background.png");
    background-position: right top;
    background-repeat: repeat-y;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 62.5em;
    min-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 150px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
}
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36976551
I wrestled with this yesterday for sometime ..I find the problem interesting, albeit-I do not have all that much time to throw at it..

..anyway, I think the problem is something to do with the relationship between the header and  main.  you may have already noticed, when we mess about with the height values on wrapper and main, just when you think you are going to obtain the specified result (according to what we think should happen based on the basic principles for css sticky footers) the darned thing extends below the footer... and if you look carefully you will note that it extends beyond the bottom of the body, which is set to height:100% (that was the red flag).

I am taking a little time to mess about further, with all JS turned off, and having removed the sidebar for now.  I'll see what gives and post back.
0
 
LVL 8

Accepted Solution

by:
twohawks earned 2000 total points
ID: 36977409
Well, rjunk, I think I am going to have to throw the towel in on this one for now.
While I find the problem most intriguing, its just taking up too much time.

While there are accessible solutions for..

1) sticky footer to bottom of content (with all sorts of equal column techniques)

2) sticky footer to bottom of viewport

..where, with each of those options, the footer pushes down when/as content height grows and begins contacting top of footer (and then scrollbar appears for the window)

3) sticky footer to bottom of viewport -always-, where expanded content height causes a scrollbar either  
   - on the content div, or
   - on the window

...but I will be damned if I can quickly figure how to
4) sticky footer to bottom of viewport, as in #2 above, excepting that a div-container in the middle section always expands itself to 100% the size of the parent container (not the whole body or window or prime-wrapper), i.e., down to the top of the footer.

That seems to be the crux of this problem.
The issue I see in your code is not being able to cause the main content div to grow within a bound set by the wrapper - and I tried quite a number of techniques.

I am sure that, given time, we could figure out a way to do this, but it does not appear to be a matter of a simple tweak to the code you are using now -- it appears to be a problem with a greater scope than that.


----------
Just some additional notes then...

At one point I thought I had it... I was trying out an equal columns technique that uses expanded borders to "fake out" the content, so I figured why not try that vertically using top and bottom borders (with some margin + padding fakeouts).  I got seemingly in the neighborhood, but its gonna need work if that's even a solution.

The infamous Paul O'Brien has been working this sort of problem for years, and has a wonderful site for learning, with lots of examples and tutorials
example: http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm
http://pmob.co.uk/pob/equal-columns.htm
http://pmob.co.uk/temp/3colfixedtest_explained.htm

...its a powerhouse of a site to learn about css layout.

There are some other techniques around for achieving what you want if you allow the content div to scroll if it expands to and touches the footer.

http://stackoverflow.com/questions/6395501/css-three-scrollable-equal-height-main-content-columns-fluid-height-and-stic
http://jsfiddle.net/NGLN/R6F5q/2/
http://jsfiddle.net/OneFlip/U747F/

And Here are some other infamous places...

Matthew James Taylor
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
http://jsfiddle.net/NGLN/R6F5q/2/
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm


http://www.alistapart.com/articles/fauxcolumns/
http://www.alistapart.com/articles/multicolumnlayouts/

http://limpid.nl/lab/css/fixed/header-and-footer

http://positioniseverything.net/piefecta-rigid-left.html

http://www.satzansatz.de/cssd/companions.html

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://www.digital-web.com/extras/positioning_101/css_positioning_example.php

I have tons more, but I will leave it there right now.

========
***In a pinch, I think you can use one of Paul O'Brian's approaches, like http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm posted above... skinny up the columns on the sides and populate them with the border content you want to have showing, such as in your site demo.
I think this could be easily done and will defnitiely provide the effect I see with the main div at your link.

For myself, I still want to find out if its possible to have a child div expand to only its parent, where the bottom is contingent upon that floating footer - its an interesting problem.
Perhaps if obi-wan of css happens by, we will receive a nugget of insight non of us has at this juncture.

I will be keeping an eye on this question.
0
 

Author Comment

by:rjunk
ID: 36979889
Hi Twohawks,
Thanks so much for the time, research and insights.  You absolutely hit on the problem and I think I will likely implement Paul O'Brien's approach...though there HAS to be some way to get that child div to expand to its parent...

anyhow, if I figure it out, I will post it here.

Thank you again!
0
 

Author Closing Comment

by:rjunk
ID: 36980114
Thank you again for such thoughtful, thorough responses.

I believe I did fix it, simply by removing the wrapper and letting the Main div take the height of body and html.  

I hope that did it, it sure seems ok now...
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36981702
Hi rjunk,
Thank you for the 'accept' and points.

Just to point out... you do realize the solution you have up there isn't quite right in as much as the page height exceeds the viewport, so the footer is pushed down out of view by default (until you scroll down.

Its up to you, but I am surprised you would find that "lost footer" acceptable when you have other alternatives that will yield much more desireable results.


During my off time this week I will continue to look through my projects... I am really sure I did something just like this, I have just not been able to find it.  I will post back to this question if I find anything.

Good luck, and thanks again.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36987408
Hey rjunk, I want you to check this code out.

I have not tweaked it for cross-browser compatibility, only have initially worked it up in Firefox.
What I have done essentially is set the main content div a relative position and then anchored an absolutely positioned div within it on the left rail.  Its the skinny yellow one.  Effectively this could be an faux border for the inner content div.

Its in the rough, but perhaps this code will help you see this, and a few other things you can do with the skeletal structure.

This method uses a footer outside of the wrapper...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>HTH Sticky Footer 1</title>
	
	
	
<style type="text/css">

html, body {height: 100%;}

#wrap {min-height: 100%;}

#header {
	height: 185px;
}

#main {
	overflow:auto;
	padding-bottom: 150px;  /* must be same height as the footer */
	border: 1px dashed grey;
	position: relative;
}

#footer {
	clear:both;
	position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

	
</head>

<body>

    <div style="position: relative; border: 1px solid blue; height: 100%; margin: 0pt auto; max-width: 65.7em;"><!-- #### encase #### -->
    <div style="position: absolute; border: 1px solid red; top: 65px; padding-right: 100px; bottom: 150px;"><!-- #### fantom floating div left #### --></div>



<div id="wrap">

	<div id="header">
		        	<h1><a href="http://dev.abeny.cct.edc.org/" class="title-home">Abe - NY</a></h1>
		        	<h2>
		                Advancing Biology Education Through Online Professional Development: <em>A New York State Research Study</em>
		          </h2>         

	</div>

	
	<div id="main">

		<div id="maincontent">
				<div style="position: absolute; border: 1px solid violet; top: 0px; width:5px; bottom: 0px; background-color:yellow;"><!-- #### fantom INNER div left #### --></div>
						<div id="content" role="main">
								<h2>The ABE-NY study investigated what teachers gain from online professional development and whether it impacts student learning.</h2>
								<p>
								Teachers in the ABE-NY study took an online professional development
								course, created by PBS Teachers’ Domain, about methods for teaching the
								topics of genetics and evolution in high school biology courses.
								</p>
								<p class="bottom-border">Researchers from Education Development Center,
								Inc. (EDC) are working in partnership with PBS TeacherLine New York and
								Buffalo’s public television station, WNED, to conduct the ABE-NY study.
								</p>
								<h3>Study Highlights</h3>
								<ul id="home-callouts">
									<li><!--begin callouts-->
										<ul>
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=6"><img src="astickyfooterabeny_files/teaching-icon.jpg" alt="Teaching" class="alignnone size-full wp-image-69"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=6">Course Materials</a></li>
										</ul>
										<ul>
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=2"><img src="astickyfooterabeny_files/icon-course-syllabus.png" alt="Course Syllabus" title="Course Syllabus" class="alignnone size-full wp-image-172" height="143" width="200"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=2">Study Design</a></li>
										</ul>
										<ul class="last-callout">
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=10"><img src="astickyfooterabeny_files/cover-narst.png" alt="Study Design" title="Study Design" class="alignnone size-full wp-image-219" height="143" width="200"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=10">Recent Presentations</a></li>
										</ul>
									</li>
								<p><!--end home page callouts--></p>
							</ul>
						</div><!-- #content-main -->
		</div><!-- #### maincontent #### -->

		<div id="side">
				<div id="primary" class="widget-area sidebar" role="complementary">
					<ul class="navigation"> 
						<li class="page_item page-item-6"><a href="http://dev.abeny.cct.edc.org/?page_id=6" title="The PD Course">The PD Course</a></li>
						<li class="page_item page-item-2"><a href="http://dev.abeny.cct.edc.org/?page_id=2" title="About The Study">About The Study</a></li>
						<li class="page_item page-item-10"><a href="http://dev.abeny.cct.edc.org/?page_id=10" title="Publications &amp; Presentations">Publications  Presentations</a></li>
						<li class="page_item page-item-12"><a href="http://dev.abeny.cct.edc.org/?page_id=12" title="Contacts">Contacts</a></li>
					</ul>
				</div><!-- #primary .widget-area -->

		</div><!-- #### end side #### -->

	</div><!-- #### end main #### -->

</div><!-- #### end wrap #### -->

<div id="footer">
				<div id="first" class="widget-area">
					<ul class="xoxo">
						<li id="text-3" class="widget-container widget_text">			
							<div class="textwidget"><a href="http://www.edc.org/" target="_blank"><img src="astickyfooterabeny_files/edc-logo.png" alt="Education Development Center" class="footer-logo"></a>
<a href="http://www.pbs.org/teacherline/" target="_blank"><img src="astickyfooterabeny_files/pbs-teacher-line-nyc-smaller.png" class="footer-logo-last" alt="PBS"></a>
							</div>
						</li>
					</ul>
				</div>
</div><!-- #### end footer #### -->


    <div style="position: absolute; right: 0pt; border: 1px solid green; top: 65px; padding-right: 100px; bottom: 150px;"><!-- #### fantom floating div right #### --></div>

</div><!-- #### end encase #### -->


</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:twohawks
ID: 36988351
Ok, and here's one more.
Not tested in anything but Firefox 3.6, but its a start for working with the concept (same as the code above is)...

In this one, I have essentially wrapped the nav div in an absolutely positioned div, giving that div the faux-right-border-background you use for the hatch border.

Please note, the code above, and this code, is really really crude.  I did nto correct it for proper validation and other minor syntax issues - it is just something quick and down-and-dirty to show the concept.

The result here gives the illusion of exactly what I think you were after...
 - static nav menu expands 100%height
 - sticky footer to bottom viewport at shallow content height, expands with bottom of content on deep content height
 - right side border maintains appearance from header to footer at any resize or content depth, giving the illusion of the content div expanding to between the header and footer ;^)

Check it out.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>ABE – NY</title>

<link rel="stylesheet" type="text/css" media="all" href="astickyfooterabeny_files/style.css">
<link href="astickyfooterabeny_files/kby6xos-a.htm" rel="stylesheet">

<style type="text/css">
	.tk-proxima-nova{font-family:proxima-nova-1,proxima-nova-2,sans-serif;}
	.tk-proxima-nova-sc-osf{font-family:proxima-nova-sc-osf-1,proxima-nova-sc-osf-2,sans-serif;}
	.tk-museo-slab{font-family:museo-slab-1,museo-slab-2,serif;}
	
	
.wrapper {
    border-top: 2px solid #D1E0EF;
    margin: 0 auto;
    max-width: 62.5em;
   /* min-height: 100%;*/
    padding: 0;
}

.sidebar {
    background-color: #327CCB;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 20%;
    z-index: 1;
}


.main {
  /*  background-image: url("images/beaker-background.png");
    background-position: right top;
    background-repeat: repeat-y;*/
    border: 1px solid red;
    bottom: 150px;
    margin: 0 auto;
    max-width: 62.5em;
    overflow: auto;
    padding: 0 0 150px;
    position: relative;
    top: 0;
}


	
	
	
	
	
	
	
	
</style>


<script type="text/javascript" src="astickyfooterabeny_files/kby6xos.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="astickyfooterabeny_files/comment-reply.js"></script>

</head>

<body class="home page page-id-4 page-template page-template-default">

<div class="wrapper">	

		<div class="header">
		        	<h1><a href="http://dev.abeny.cct.edc.org/" class="title-home">Abe - NY</a></h1>
		        	<h2>
		                Advancing Biology Education Through Online Professional Development: <em>A New York State Research Study</em>
		            </h2>         
		 </div><!-- #header -->  
<div style="border: 2px solid orange; top: 105px; bottom: 150px; position: absolute; width: 62em; min-height:600px;background-image: url('images/beaker-background.png'); background-position: right top; background-repeat: repeat-y;"><!-- #### fantom floating div left #### -->
				<div id="primary" class="widget-area sidebar" role="complementary">
					<ul class="navigation"> 
						<li class="page_item page-item-6"><a href="http://dev.abeny.cct.edc.org/?page_id=6" title="The PD Course">The PD Course</a></li>
						<li class="page_item page-item-2"><a href="http://dev.abeny.cct.edc.org/?page_id=2" title="About The Study">About The Study</a></li>
						<li class="page_item page-item-10"><a href="http://dev.abeny.cct.edc.org/?page_id=10" title="Publications &amp; Presentations">Publications <br>&amp;<br> Presentations</a></li>
						<li class="page_item page-item-12"><a href="http://dev.abeny.cct.edc.org/?page_id=12" title="Contacts">Contacts</a></li>
					</ul>
				</div><!-- #primary .widget-area -->
		</div>   
		 <div class="main">
		    	

		    	<div id="content-container">
						<div id="content" role="main">
								<h2>The ABE-NY study investigated what teachers gain from online professional development and whether it impacts student learning.</h2>
								<p>
								Teachers in the ABE-NY study took an online professional development
								course, created by PBS Teachers’ Domain, about methods for teaching the
								topics of genetics and evolution in high school biology courses.
								</p>
								<p class="bottom-border">Researchers from Education Development Center,
								Inc. (EDC) are working in partnership with PBS TeacherLine New York and
								Buffalo’s public television station, WNED, to conduct the ABE-NY study.
								</p>
								<h3>Study Highlights</h3>
								<ul id="home-callouts">
									<li><!-- begin callouts -->
										<ul>
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=6"><img src="astickyfooterabeny_files/teaching-icon.jpg" alt="Teaching" class="alignnone size-full wp-image-69"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=6">Course Materials</a></li>
										</ul>
										<ul>
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=2"><img src="astickyfooterabeny_files/icon-course-syllabus.png" alt="Course Syllabus" title="Course Syllabus" class="alignnone size-full wp-image-172" height="143" width="200"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=2">Study Design</a></li>
										</ul>
										<ul class="last-callout">
											<li><a href="http://dev.abeny.cct.edc.org/?page_id=10"><img src="astickyfooterabeny_files/cover-narst.png" alt="Study Design" title="Study Design" class="alignnone size-full wp-image-219" height="143" width="200"></a></li>
											<li class="callout-link"><a href="http://dev.abeny.cct.edc.org/?page_id=10">Recent Presentations</a></li>
										</ul>
									</li>
								<p><!-- end home page callouts --></p>
							</ul>
						</div><!-- #### content-main end #### -->
				</div><!-- #### content-container end#### -->
			
		</div><!-- #main -->
</div><!-- #wrapper -->

	<div id="footer" role="contentinfo">
			<div id="footer-widget-area" role="complementary">
				<div id="first" class="widget-area">
					<ul class="xoxo">
						<li id="text-3" class="widget-container widget_text">			
							<div class="textwidget"><a href="http://www.edc.org/" target="_blank"><img src="astickyfooterabeny_files/edc-logo.png" alt="Education Development Center" class="footer-logo"></a>
<a href="http://www.pbs.org/teacherline/" target="_blank"><img src="astickyfooterabeny_files/pbs-teacher-line-nyc-smaller.png" class="footer-logo-last" alt="PBS"></a>
							</div>
						</li>
					</ul>
				</div><!-- #first .widget-area -->

				<div id="second" class="widget-area">
					<ul class="xoxo">
						<li id="text-4" class="widget-container widget_text">
							<div class="textwidget">This material is based upon work supported by the National Science Foundation under grant number DRL-0732186.</div>
						</li>
					</ul>
				</div><!-- #second .widget-area -->

				<div id="third" class="widget-area">
					<ul class="xoxo">
						<li id="text-5" class="widget-container widget_text">
							<div class="textwidget"><a href="http://dev.abeny.cct.edc.org/?page_id=283">Policies</a>    -    <a href="">Site Credits</a></div>
						</li>	
					</ul>
				</div><!-- #third .widget-area -->

				<div id="fourth" class="widget-area">
					<ul class="xoxo">
						<li id="text-6" class="widget-container widget_text">
							<div class="textwidget"></div>
						</li>
					</ul>
				</div><!-- #fourth .widget-area -->

			</div><!-- #footer-widget-area -->
	</div><!-- #footer -->




</body>

</html>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question