How can I move overflowing list elements to a new column?

Question

I have one problem. So as you can see, last <li> element is out of <div> and I want that <li> element to go to the next column. Is that possible?

This is my code.

.widget-container {
  z-index:9999;
  position:absolute;
  left:17.5%;
  background:white;
  width:65%;
  max-height:310px;
  border:1px solid grey;
}

.widget-container ul{
  display:block;
  list-style:none;
  width:10%;
  float:left;
  height:auto;
  max-height:310px;
}

.widget-container img{
  float:right;
  border:5px solid white;
}

.widget-container a{
  text-decoration:none;
  color:grey;
  padding:5px;
}

<div id="bijela_tehnika" class="widget-container">
  <ul>
    <a href="#"><li>Hladnjaci i zamrzivaći</li></a>
    <a href="#"><li>Perilica rublja</li></a>
    <a href="#"><li>Perilica suđa</li></a>
    <a href="#"><li>Klima uređaji</li></a>
    <a href="#"><li>Pećnice</li></a>
    <a href="#"><li>Ploće za kuhanje</li></a>
    <a href="#"><li>Uređaji za grijanje</li></a>
    <a href="#"><li>Bojleri</li></a>
  </ul>
  <img src="bijela_tehnika.jpg" width="800px" height="300px" />
</div>

Answer 1

Use width: auto on the surrounding container like this:

#bijela_tehnika {
    width: auto;
}

Answer 2

In your question, you asked how to make overflowing list elements move to a second column. Simply fixing your markup is not sufficient to achieve this (as demonstrated here). This can be done using the column-width and/or column-count css properties.

This article on css-tricks provides an easy-to-understand explanation of the column properties.

Most browsers support these properties, although you will need to use vendor-prefixing for gecko and webkit browser variants. Internet Explorer 9 and below will not support it at all.

The example below shows how to specify that when an element overflows from its container vertically, it should start a new column 150px over.

.container {
    height: 200px;
    border: 1px solid black;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}

<div class="container">
    <ul>
        <li><a href="#">First Link</a></li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
        <li><a href="#">Fourth Link</a></li>
        <li><a href="#">Fifth Link</a></li>
        <li><a href="#">Sixth Link</a></li>
        <li><a href="#">Seventh Link</a></li>
        <li><a href="#">Eighth Link</a></li>
        <li><a href="#">Ninth Link</a></li>
        <li><a href="#">Tenth Link</a></li>
        <li><a href="#">Eleventh Link</a></li>
        <li><a href="#">Twelfth Link</a></li>
        <li><a href="#">Thirteenth Link</a></li>
        <li><a href="#">Fourteenth Link</a></li>
        <li><a href="#">Fifteenth Link</a></li>
        <li><a href="#">Sixteenth Link</a></li>
        <li><a href="#">Seventeenth Link</a></li>
        <li><a href="#">Eighteenth Link</a></li>
        <li><a href="#">Nineteenth Link</a></li>
        <li><a href="#">Twentieth Link</a></li>
    </ul>
</div>

---

Given the code you've provided, I think you should add the column-fill and column-width properties to your ul element. Included below is an example that more closely replicates your use-case (modified from your code).

.widget-container {
    z-index:9999;
    position:absolute;
    left:17.5%;
    background:white;
    width:65%;
    max-height:310px;
    border:1px solid grey;
}
.widget-container ul {
    display:block;
    list-style:none;
    width:10%;
    float:left;
    height:auto;
    max-height:310px;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}
.widget-container li {
    padding: 10px 0;
}
.widget-container img {
    float:right;
    border:5px solid white;
    height: 300px;
    width: 60%;
}
.widget-container a {
    text-decoration:none;
    color:grey;
    padding:5px;
}

<div id="bijela_tehnika" class="widget-container">
    <ul>
        <li><a href="#">Hladnjaci i zamrzivaći</a></li>
        <li><a href="#">Perilica rublja</a></li>
        <li><a href="#">Perilica suđa</a></li>
        <li><a href="#">Klima uređaji</a></li>
        <li><a href="#">Pećnice</a></li>
        <li><a href="#">Ploće za kuhanje</a></li>
        <li><a href="#">Uređaji za grijanje</a></li>
        <li><a href="#">Bojleri</a></li>
        <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    </ul>
    <img src="http://placehold.it/350x150?text=your+image" />
</div>

Answer 3

The problem is you've wrapped your li elements in a tags, but the only valid element inside an ordered or unordered list is an li. You need to change your code so it reads:

<ul>
    <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    <li><a href="#">Perilica rublja</a></li>
    <li><a href="#">Perilica suđa</a></li>
    <li><a href="#">Klima uređaji</a></li>
    <li><a href="#">Pećnice</a></li>
    <li><a href="#">Ploće za kuhanje</a></li>
    <li><a href="#">Uređaji za grijanje</a></li>
    <li><a href="#">Bojleri</a></li>
</ul>

I'm guessing the reason why you put the a tag around the li tag was to make it clickable anywhere, not just on the text. To get around this you can make the a tag a block element using CSS.

ul > li > a {display: block}

Answer 4

Your HTML is invalid. You need to have the <li> elements directly under <ul> and nothing else. Change your code to:

<ul>
    <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    <li><a href="#">Perilica rublja</a></li>
    <li><a href="#">Perilica suđa</a></li>
    <li><a href="#">Klima uređaji</a></li>
    <li><a href="#">Pećnice</a></li>
    <li><a href="#">Ploće za kuhanje</a></li>
    <li><a href="#">Uređaji za grijanje</a></li>
    <li><a href="#">Bojleri</a></li>
</ul>

W3C Recommendation says a <ul> or <ol> tag can contain only <li> as children.

Answer 5

Your html is invalid. Have a look at http://www.w3.org/TR/html-markup/ul.html#ul-content-model which tells you, that the only content allowed inside a ul is li.

The li however is then allowed to contain arbitrary flow content: http://www.w3.org/TR/html-markup/li.html

Your code should look like:

<ul>
    <li><a href="#">Hladnjaci i zamrzivaći</a></li>
    <!-- ... -->
</ul>