Hunter S Hunter S - 1 month ago 6
CSS Question

How to make ul extend past parent div?

I have a container div with a set width and height and the overflow set to auto. Inside, there is an unordered list with content that causes the div to scroll.

The problem is that the list itself does not extend past the container div. So when I try to add padding to the right side of the list, it doesn't work properly:

enter image description here

enter image description here

CSS

.container {
width: 200px;
height: 400px;
overflow: auto;
}

ul {
list-style-type: none;
margin: 0;
padding: 0 10px 0 0;
white-space: nowrap;
}


Here's a fiddle that shows the problem.

Answer

Just add float: left to your ul menu element.

If you float your ul within the .container, the item will no longer expand to the width of the parent.

Try it here

You can achieve this with adding: display: inline-block too, instead floating it.

Comments