How to keep floating ul elements in one line

Question

I am currently working on binary tree script. For this script I am using the following html setup:

 #tree_ul {
        left: 50%;
    }

    .tree li {
        float: left;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li::before, .tree li::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid #ccc;
        width: 50%;
        height: 20px;
    }

    .tree li::after {
        right: auto; left: 50%;
        border-left: 1px solid #ccc;
    }

    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }

    .tree li:only-child {
        padding-top: 0;
    }

    .tree li:first-child::before, .tree li:last-child::after {
        border: 0 none;
    }

    .tree li:last-child::before {
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }

    .tree li:first-child::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }

    .tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 20px;
    }

<ul id='tree_ul'>
        <li>
            <a href='#'>Main Account</a>
                <ul id='main-account'>
                    <li>
                        <a href='#'>First Child</a>
                            <ul id='first-child-childs'>
                                <li>
                                    <a href='#'>Third Child</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                    <li>
                        <a href='#'>Second Child</a>
                            <ul id='first-child-childs'>
                                <li>
                                    <a href='#'>Third Child</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </a>
        </li>
    </ul>



   

So basically the first ul element has a width of 100% of the page. The ul elements within the first one have a width of 50% of the parent and are left floated. This pattern goes on for the rest of the binary tree.

Now all of this is working great up until the point, where the elements within a list exceed the width of the parent element. Then the two floated elements with a width of 50% are displayed underneath eachother instead of next to eachother.

Is there a way for me to make sure, that the elements with 50% width are always positioned next to each other? As a result the window would need to be scrollable i think. And that is fine with me. I woudl prefer a pure css solution but if there is no way around it i would be happy to user JavaScript or Jquery as well. Thanks

Answer 1

Use flex instead of percentages and floats. For this case you can set this property for both inner elements as follows: flex: 1. Since they have the same size, they should share the space. That way you don't have to specify the size. https://www.w3schools.com/cssref/css3_pr_flex.asp

You can also lay them next to each other as desired by using justify-content: space-between/space-around/etc.

If you want to learn more about flex, this is a great resource: http://flexboxfroggy.com/ (seems ridiculous but it is very helpful!)