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>

That's correct but not very useful... It's invalid because the list items should wrap the anchors, not the other way round. Only list items can be direct children of both ordered and unordered lists. — evilunix, Aug 12 '15 at 14:52

Woodrow Barlow · Accepted Answer · 2015-08-12T15:40:18.563

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>

@IvanGorky does the example in my answer work for you? does it only stop working when you try to apply it to your own code? which browser are you using? what do you mean when you say it "doesn't work"... does it sort of work, but overlaps incorrectly? — Woodrow Barlow, Aug 12 '15 at 15:41
When I try apply it on my own code it doesn't working...li elements still outside div. I am using google chrome — Ivan Gorky, Aug 12 '15 at 16:34
there's not much i can do to debug it without being able to look at it. if you can create a runnable example on jsfiddle or share a live link, i can work with you and find the problem. — Woodrow Barlow, Aug 12 '15 at 16:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86832/discussion-between-woodrow-barlow-and-ivan-gorky). — Woodrow Barlow, Aug 12 '15 at 20:38

score 1 · Answer 2 · answered Aug 12 '15 at 14:51

1

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.

answered Aug 12 '15 at 14:51

Praveen Kumar Purushothaman

154,660
22
177
226

1

while this is true, does it solve OP's problem? if not, then it is an appropriate comment but shouldn't be an answer. – Woodrow Barlow Aug 12 '15 at 14:58
@WoodrowBarlow When the OP makes the HTML valid, then the styles will obey. Yes, it does solves the OP's problem. – Praveen Kumar Purushothaman Aug 12 '15 at 15:13
OP was asking how to make overflowing li elements go to a second column. simply fixing the nesting order [doesn't seem to have that effect](http://jsfiddle.net/eruyzmk1/). – Woodrow Barlow Aug 12 '15 at 15:22

score 0 · Answer 3 · answered Aug 12 '15 at 14:51

0

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>

answered Aug 12 '15 at 14:51

Christoph

46,101
18
92
121

while this is true, does it solve OP's problem? if not, then it is an appropriate comment but shouldn't be an answer. – Woodrow Barlow Aug 12 '15 at 14:58
1

@WoodrowBarlow yes it does. Writing valid markup fixed a lot of problems and is the first thing you should strive for. If he still has problems, he can follow up with it. – Christoph Aug 12 '15 at 15:00
OP was asking how to make overflowing li elements go to a second column. simply fixing the nesting order [doesn't seem to have that effect](http://jsfiddle.net/eruyzmk1/). – Woodrow Barlow Aug 12 '15 at 15:03
@WoodrowBarlow you have a valid point there. I think I misunderstood his english;) – Christoph Aug 12 '15 at 15:12
@WoodrowBarlow can you explane me how to do it right? – Ivan Gorky Aug 12 '15 at 15:12
@IvanGorky first of all, you should provide some proper markup together with a selfcontained example. – Christoph Aug 12 '15 at 15:16
@Christoph i saw this answer http://stackoverflow.com/questions/6509106/is-there-a-way-to-break-a-list-into-columns but no help, I do something wrong – Ivan Gorky Aug 12 '15 at 15:17
post your code here: http://jsfiddle.net/ and add it to your question - I'm sure we can help you then. – Christoph Aug 12 '15 at 15:20

score 0 · Answer 4 · edited Aug 13 '15 at 07:49

0

Use width: auto on the surrounding container like this:

#bijela_tehnika {
    width: auto;
}

edited Aug 13 '15 at 07:49

theDmi

15,621
6
62
121

answered Aug 13 '15 at 05:33

Domain

10,694
2
19
41

score -1 · Answer 5 · answered Aug 12 '15 at 15:01

-1

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}

answered Aug 12 '15 at 15:01

Styphon

9,859
8
51
82

Why the -1? If you down voted please let me know why so I can improve my answer. – Styphon Aug 12 '15 at 15:05
thanks, It really helps So how can I now move last element who isn't in div to right? – Ivan Gorky Aug 12 '15 at 15:08
2

I gave a -1 because writing an answer which already exists twice is not helpful at all. While your second paragraph was helpful, you suggest improvement to one of the existing answers or edit them right away. Duplication just makes it a pain for everybody to dig though all the (similar) answers. – Christoph Aug 12 '15 at 15:09
revenge downvoting, eh? – Christoph Aug 12 '15 at 20:38
No, I haven't down voted your answer, I'm not that petty. – Styphon Aug 12 '15 at 21:23

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

5 Answers5