Columns Don't Clear

Just a quick note that I’ve noticed your clearing of the columns is not working properly (as in your very last empty div that should clear the content below the columns themselves). You have the very last div doing the clear, which is great, but it’s set to “display: none” which negates the clear altogether. At least in Firefox as I have not tested in other browsers.

If you remove the “display: none” it works, but it could lead to complications if other css overwrites the clear properties. I would recommend the following inline style for this:

<div style="clear: both; float: none; display: block; height: 0; width: 0; font-size: 0; line-height: 0; visibility: hidden;"></div>

This will do the same thing, but set the div to a 0x0 element, with no font size and no line height to reduce extra padding or margin on the element. Also, the visibility will keep the element on the page and acting the way it should, while still removing it visibly from the page.

Again, this is just a suggestion on how to fix it, but currently it’s not working. I have to add a hack in my css to fix it. I use the following:

.csRow:after {
	display: block;
	content: '';
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
}

Which of course will not work in older versions of IE. But we don’t support IE7 and lower, so this fix works for us and may even be an option for you.

http://ww.wp.xz.cn/plugins/advanced-wp-columns/