rjunk
asked on
Sidebars not tiling on large monitors
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!
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!
When I turn off height:100% for
html, body, .wrapper in style.css the problem goes away here.
html, body, .wrapper in style.css the problem goes away here.
ASKER
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.
ASKER
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.
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.
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.
Try to remove padding-bottom: 150px;
.main {
background-image: url("images/beaker-backgro und.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;
}
.main {
background-image: url("images/beaker-backgro
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;
}
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.
..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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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!
ASKER
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...
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...
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.
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.
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...
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 & 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>
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-backgrou nd 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.
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-backgrou
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 & Presentations">Publications <br>&<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>
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'.