Question

So I’ve been trying to get floated lists to work right.

This

is what it’s supposed to look like, but when I look at it with chrome or firefox I get this

I have no clue why this is happening. I’ve tried the list-style, margin and padding solutions, but nothing seems to make a difference.

Thanks.

Answer 1

Your problem lies with an error in the CSS itself: what you’re trying to do is correct. Replace this:

name .ul

With this:

.name ul

…and it works as expected. You should simplify your HTML if possible (there’s no point giving each individual list item the same class). I’ve put an example online here.

Also, your declaration of overflow: none is incorrect. That’s not valid: use hidden or auto for the purpose of clearing your floats. Accepted values

overflow: visible | hidden | scroll | auto | inherit