[solved] Lot of vertical white space after Gallery

[booo9]

I have problem with one sub gallery.
I have coded the gallery template to show one thumbnail by hiding all but 1st thumbnail. Seems to be working except for a lot's of vertical whitespace I get after gallery with 130 image and I dont know how to get rid of this white space. Other galleries with 60 images dont have this issue. I have poked around with Firebug but I cannot figure it out how to get rid of this vertical white space. The space seems to go away when I delete
<div class="galleryclear"></div>
but then next content after gallery sticks with vertical space.

This is first gallery on my site http://tinyurl.com/a3ns3ea

[lewishowles]

The CSS for galleryclear div is set to

Code: Select all

clear:both;

It's actually putting a lot of space in because it's clearing the news sidebar (which is floated left - notice the gap goes all the way down to the very bottom of the news sidebar, and if you make the news taller, the gap gets taller too).

The easiest way to fix this is to get rid of the galleryclear div from the template, and change

Code: Select all

<div class="gallery">

to this

Code: Select all

<div class="gallery clearing">

Then, add this CSS:

Code: Select all

.clearing {
	*zoom:1;
}

.clearing:before,.clearing:after {
	content:"";
	display:table;
	line-height:0;
}

.clearing:after{
	clear:both;
}

Then, you can add the 'clearing' class to anything that contains floated elements and it will clear them, which saves you having to use things like

Code: Select all

<div class="galleryclear"></div>

which causes issues like this and is a bit messy.

[booo9]

@lewishowles, thanks for looking into this, I did all what you suggested but unfortunatelly to no avail. The vertical space after 1st gallery still goes to the end of news div.

Firebug reveals that "*zoom:1;" property is removed by the browser.

Did some researched on the web, the problem is with the scope of clear attribute, to limit the scope of clear to immediate outer div I added "overflow:hidden" to the outer div, the other css was left as before.