View Full Version : Small gap between sidebars and footer

05-11-2011, 01:19 AM

I just upgraded my XHTML home page to HTML5. I've got pretty much all the quirks worked out .. except for a small gap between the blue-green sidebars and the footer.

The gap wasnt there before, so I know it can be eliminated. I'm just not sure how. I've tried playing with padding, but that doesnt seem to do anything.

The sidebars are marked-up as the new <aside> element, and the center section is marked-up with/as a <section> element.

.liquidElasticHybrid #sidebar1 {
float: left;
width: 12em;
background: #699;
padding: 0;
.liquidElasticHybrid #sidebar2 {
float: right;
width: 12em;
background: #699;
padding: 0;

I use a bit a jQuery to bring those columns down.


It's not a big deal, stylistically, but how might I eliminate that gap?

05-11-2011, 01:41 AM
I reduced the height of the 'mainContent' by 8px and it reduced the gap. But I believe the height is calculated by your JS/jQuery, so you might need to amend the code.

05-11-2011, 01:53 AM

how did you reduce the height of maincontent?

i do not know js well enough to perform such tweaks.

05-11-2011, 03:45 PM
I amended it directly in the inline style="height:somenumber-8;", but you can't do that easily as your page uses JS to adjust the heights for the columns. Try amending your function as indicated:

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
group.height(tallest - 8);
$(document).ready(function() {

05-11-2011, 08:12 PM

I mod'ed the script, but nothing changed. No big deal. Thanks for trying.

05-11-2011, 10:37 PM
Hello again PonchoX,
I did not get to spend much time on this before...
That mystery gap is caused by the default 16px top/bottom margin on your ul inside #mainNav at the top of section#mainContent.

To illustrate, make your CSS look like this -
nav#mainNav ul {
text-align: center;
border-bottom: 2px #699 solid;
margin: 0;

You can see that zeroing out the margin makes that gap go away. I think for that to work better you should have a look at how collapsing margins (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html) work. That way you'll be able to keep that top/bottom margin.

#mainContent {overflow: auto;} makes the columns and #footer meet but your box model (http://www.w3.org/TR/CSS2/box.html) issues give you both X and Y scrollbars that I'm sure you'd rather not have.

The border method of curing collapsing margins might work better for you. Try adding #mainContent {border-top: 1px solid #000;} to your CSS.

05-15-2011, 12:08 AM
Yes! That did it!

It makes sense .. now that you've pointed it out, seeing how only currently-recognized elements have pre-styled margins & paddings .. not the new HTML5 elements I've been trying to tweak.

And there's the 8-pixels (half of 16) identified by Andrew.

Glad I returned to this entry. I'd almost abandoned hope of finding a solution.

Again, my sincere thanks. I admire your skills.

I see what you are saying about the top-border. I coded a 6-px top border to #mainContent and it re-introduces the gap at the bottom of the sidebars.

Yes, I am familar with how collapsing margins work.

The gap doesnt seem as bad when I at least know WHY it's there.

Tho it seems strange .. cuz before I had both the top margin AND no gap at the bottom.

What if I added padding instead of border? Would that also produce the gap. (I'll try.)