Prevent Overlapping of li in ul with CSS

Glenn Glenn's Blog 0 Comments

If you are splitting your UL into a column format li in a similar way to the below:-

[css]
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;
}
[/css]

… 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:-

overlapping-li Prevent Overlapping of li in ul with CSS Prevent Overlapping of li in ul with CSS overlapping li

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

[css]
li:nth-child(2n+1) {clear: both;}
[/css]

(when adding to the li) or alternatively to its parent UL we can use:-

[css]
ul > li:nth-child(2n+1) {
clear: both;
}
[/css]

NB If you have more than 2 columns simply amend the (‘your column number’n+1) value.

… and then you get:-

overlapping-li-1 Prevent Overlapping of li in ul with CSS Prevent Overlapping of li in ul with CSS overlapping li 1

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
Prevent Overlapping of li in ul with CSS Prevent Overlapping of li in ul with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *


*