horizontal align li items with subchild of it in two group without leaving extra space

Question

I am wokring on project where I need my ul li to display horizontally align with 50% width and the sub child of li should be under it

I know some of will say to try CSS masonry but Will it work in IE and I have gone through so many tutorials but I am still not getting clear understanding how to implement that approach here

My problem start when left side have sub child and right side don't then right side of li keeps space between two li.Also sometimes order of li gets mismatched

NOTE:I need IE 11 support as well!! Here is my HTML

<style>
        .level1 {
            float: left;
        }

        .level1>li {
            float: left;
            padding: 20px;
            width: 50%;
        }

        .level1>li>ul {
            padding-left: 20px
        }
    </style>



<ul class="level1">
        <li>Level</li>

        <li>Level2
            <ul class="level2">
                <li>Level1</li>
                <li>Level2</li>
            </ul>
        </li>

        <li>Level3</li>
        <li>Level4</li>
        <li>Level5</li>
        <li>Level6</li>
    </ul>

My output

Here as shown in image I don't want space between level1 and level3 no matter how much child level2 have and vice versa for level2 and level 4 if level1 has n child

You can't do that with floats. You're essentially asking for CSS masonry - https://stackoverflow.com/questions/44377343/css-only-masonry-layout — Paulie_D, Mar 12 '20 at 16:11
unfortunately I cant modify my HTML which is one of most requirement — tyler, Mar 12 '20 at 17:12

score 1 · Accepted Answer · answered Mar 14 '20 at 07:09

I think you are looking for CSS masonry where it can be adjusted according to column ise or row wise depending on your need.

Also giving some link of js fiddle for your reference

Here is the modified solution of your code:

<style>
        .level1 {
         position:relative;
         -moz-column-count: 2;
        -moz-column-gap: 3%;
        -moz-column-width: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 3%;
        -webkit-column-width: 50%;
        column-count: 2;
        column-gap: 3%;
        column-width: 50%;

        }

        .level1>li {
            float: left;
            padding: 20px;
            width: 50%;
        }

        .level1>li>ul {
            padding-left: 20px
        }
    </style>



<ul class="level1">
        <li>Level</li>

        <li>Level2
            <ul class="level2">
                <li>Level1</li>
                <li>Level2</li>
            </ul>
        </li>

        <li>Level3</li>
        <li>Level4</li>
        <li>Level5</li>
        <li>Level6</li>
    </ul>

HOpe it will work for you!

Thanks It worked after doing little changes by refering the JS fiddle you have mentioned — tyler, Mar 14 '20 at 09:16

horizontal align li items with subchild of it in two group without leaving extra space

1 Answers1