Floating li elements with sublist

Question

I got small problem:

li {width: 50%; float: left;}
ul.sub li {width: 100%;}

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

How I can prevent those huge white empty space betwen Test 1 and Test 3 ? The best option would be that all main li elements would fit into that empty space.

Is that possible? Please HELP!

I think you wont resolve this just with floats... You can take a look at this plugin: http://masonry.desandro.com/ — giordanolima, Jul 24 '15 at 11:31
agree, no CSS only solution, you'd have to use some kind of javascript — Starscream1984, Jul 24 '15 at 11:32
I think it's perfectly expected behaviour - can you draw how would you like to see it? — robjez, Jul 24 '15 at 11:38

score 0 · Answer 1 · answered Jul 24 '15 at 11:38

I don't know if it's what you are looking for, but this could be a solution.

li {
    width: 50%; 
    float: left;
}
li:nth-child(2){
    float: right;
}
li:nth-child(2) .sub li {
    float: none;
}

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

Good Luck'

Luthando Ntsekwa · Answer 2 · 2015-07-24T11:51:09.133

0

You can push all the odd li's to the left, and the even ones to the right, after pushing the second li to the right, the rest will be forced to stay on the left hand side due to insufficient space :

li:nth-child(odd) {width: 50%; float: left;}
li:nth-child(even) {width: 50%; float: right;}
ul.sub li {width: 100%;}

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

edited Jul 24 '15 at 11:51

answered Jul 24 '15 at 11:42

Luthando Ntsekwa

4,192
6
23
52

Could you explain why you are using `odd` and `even` here? – Alexis B. Jul 24 '15 at 11:47
@RedBreast your answer might also work well in this `
- ` with sub-li's was the 1st `
- ` in the list"
– Luthando Ntsekwa Jul 24 '15 at 11:57
Ahah, I was exactly wondering the same with your solution. But anyway, however he resolves this, this will always be fairly tricky / easy breakable. – Alexis B. Jul 24 '15 at 12:00
@RedBreast either way, this solution will still work because the `nth` child is not hard-coded – Luthando Ntsekwa Jul 24 '15 at 12:03

score 0 · Answer 3 · answered Jul 24 '15 at 11:57

Just guessing..

ul.sub li {width: 90%; float:right;}
li {width: 50%; }

<ul>
    <li>Test 1</li>
    <li>Test 2
         <ul class="sub">
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

score 0 · Answer 4 · answered Jul 24 '15 at 12:12

I would suggest to add class to <li> holding your sub-menu, to avoid hardcoding li nth number into CSS. You wouldn't need a class on your sub ul then. This would allow you to move html of submenu around without css depending on its position in markup:

HTML:

<ul>
    <li>Test 1</li>
    <li class="sub">Test 2
         <ul>
            <li>Test2.1</li>
            <li>Test2.2</li>
            <li>Test2.3</li>
            <li>Test2.4</li>
            <li>Test2.5</li>
        </ul>
    </li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
 </ul>

CSS:

li {width: 50%; float: left;} 
li.sub {float: right;} 
.sub li {width: 100%;}

Floating li elements with sublist

4 Answers4