Question

I’m struggling with a minor css issue which I think would be quite easy for people with a bit css knowledge 🙂
Im doing a

<ul class="test">
    <li>1</li>
    <li>2</li>
</ul>
some other content

And with styling:

ul.test {
    list-style:none;
    margin:0;
    padding:0;
}

ul.test li {
    float:left;
}

Which is straightforward. My questions is: the “some other content” always moves to the top beside the ul. It happens as soon I set the li to float:left.
How can I avoid this? Having the same behavior as if the <li> didnt had float:left.

Answer 1

You need to set the <ul> tag to overflow: auto:

ul.test {
  list-style:none;
  margin:0;
  padding:0;
  overflow: auto;
}

You can read more about it here.