Align content/navigation horizontally on both ends without flexbox or text-align justify

Question

I'm trying to do in a gist the following :

I have a container with a fixed(hard-coded) width fx 1300px and 6 items inside. The items are anchor tags with a 16px font size ,no width added for them as they do change when the languages on the site get changed.

The task at hand : these 6 items need to be aligned on both ends (logo - left , and burger-menu/searchbar - right) here's an example of the html :

     <div class="wrapper">
                <div class="navContainer">
                    <a class="navLink" href="">This LongName</a>
                    <a class="navLink" href="">This LongerName</a>
                    <a class="navLink" href="">This evenLongerName</a>
                    <a class="navLink" href="">This short</a>
                    <a class="navLink" href="">ThatShort</a>
                    <a class="navLink" href="">OneWordName</a>
                </div>
            </div>

and the CSS 
`       .wrapper{
            background-color:#CCC;
            color:black;
            height:80px;
        }
        .navContainer{
            width:1300px;
            margin:0 auto;
        }
        .navLink{
            display: inline-block;
            text-decoration: none;
            color: #676767;
            font-size: 16px;
            line-height: 22px;
            padding-top: 20px;
            margin: 0;
        }
`

The problem comes from the fact I cannot use text-align justify with a pseudo element, no flexbox, nothing of the sort to figure out the space between these elements that do not have a fixed width as it will change depending on the content filled in the tags .

Is it possible to have it aligned both to left and right with the same space without utilizing flexbox/text-align justify or display table, table-cell? The reason behind why I cannot use these it's supposed to be supported on IE8.

Thank you for your time in advance

PS I tried with getting the width dynamically with Jquery as well, still can't work properly as I cannot exclude the last item to not be in the equation. When it is however it works , though it never adds enough padding-right for the lastchild to stick to the right.

Answer 1

You mention not using width, but the text will just wrap to the next line(s) if the phrase is too long, so that's how I would recommend doing it. Swap out display: inline-block; with display: block; on the .navLink elements, and add a set width in combination with float since that's supported back to IE8.

You can't use calc(100%/6) because it's not supported in IE8, but you can just add in the value of that calculation (16.667%). See included code snippet. I also adjusted the padding on the .navLink so it will control the height of the .wrapper rather than having a set height on that element. This is because long nav terms/phrases could wrap.

 .wrapper{ float: left; width: 100; background-color:#CCC; } .navContainer{ width: 1300px; margin: 0 auto; } .navLink{ display: block; float: left; width: 16.6667%; text-decoration: none; color: #676767; font-size: 16px; line-height: 22px; padding-top: 20px; padding-bottom: 20px; margin: 0; }

 <div class="wrapper"> <div class="navContainer"> <a class="navLink" href="">This LongName</a> <a class="navLink" href="">This LongerName</a> <a class="navLink" href="">This evenLongerName that will wrap to lower lines with more text when necessary like in a German phrase for example</a> <a class="navLink" href="">This short</a> <a class="navLink" href="">ThatShort</a> <a class="navLink" href="">OneWordName</a> </div> </div>