Small gap between sidebars and footer

[PonchoX]

Hi.

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.

http://radified.com/index.rad

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

[AndrewGSW]

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.

[PonchoX]

andrew,

how did you reduce the height of maincontent?

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

[AndrewGSW]

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:

        <script>
            function equalHeight(group) {
               tallest = 0;
               group.each(function() {
                  thisHeight = $(this).height();
                  if(thisHeight > tallest) {
                     tallest = thisHeight;
                  }
               });
               group.height(tallest - 8);
            }
            $(document).ready(function() {
               equalHeight($(".column"));
            });
        </script>

[PonchoX]

Hmm.

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

[Excavator]

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 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 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.

[PonchoX]

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.)