If you are splitting your UL into a column format li in a similar way to the below:-
ul {
width: 625px;
max-width: 840px;
min-height: 280px;
list-style: none outside none;
}
li {
float: left;
position: relative;
display: inline-block;
width: 40%;
padding: 0px;
margin: 0px;
}
… what you might find is that if the li on either side is higher than the other that the corresponding li is overlapped or thrown out of place like so:-
The highlighted 3rd item should be starting a new line, but is being pushed to the right as the first li has a height taller than the second throwing the nested lis out of position. To unify the columns and force the li to a new line in the respective column we simply need to add the following CSS:-
li:nth-child(2n+1) {clear: both;}
(when adding to the li) or alternatively to its parent UL we can use:-
ul > li:nth-child(2n+1) {
clear: both;
}
NB If you have more than 2 columns simply amend the (‘your column number’n+1) value.
… and then you get:-
Note that the li is pushed to a new line.
We have found this technique extremely useful when adjusting menu items in the Uber Menu plugin from Codecanyon.
About the Author
