Hi Gang ...

 

Working on a responsive list which adapts from 4 column to 3, 2, 1. Most of it is working fine but I have hit my age old problem of floated li getting caught on the floated li above with longer text ... I really want to put this to bed ... permanently.

 

The Fiddle - you can see the problem in the image below. I'm running out of ideas on how to do this. Help appreciated

The only thing I can think of is using mq to target each column change and nth child to clear the floats

 

I think this should work on with the image you posted

 

.foot-link li:nth-child(3n+4){clear:left;}

Probably not the best way (I also removed the float on the ul) see if thats what your after

 

@media only screen and (max-width: 800px) {
	.foot-link li {
	width: 32%;
	}
    .foot-link li:nth-child(3n+4){clear:left;}
    
}

@media only screen and (max-width: 600px) {
	.foot-link li {
	width: 49%;
	}
    .foot-link li:nth-child(3n+4) {
        clear:none;}
    .foot-link li:nth-child(2n+3) {clear:left;}
}

If you're ok with a javascript solution you could take a look here:

http://www.webdesignerforum.co.uk/topic/69443-how-to-make-your-auto-heights-equal/

The solution works with floating block elements but if you give your links a display block property you should be able to organize them in nice responsive coulums with this script

Edited July 7, 201313 yr by Nillervision

Nice one ... works like a peach ... new fiddle working with all 4 cols.

Thanks Niller ... I also found this about nth-child which was handy.