align three buttons horizontally (left, center, right)

Question

html

<div class="download-buttons">
                <div class="download-button-wrapper">
                    <div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1440</a></li>
                            <li><a href="#">1800 x 900</a></li>
                        </ul>
                    </div>
                </div>
                <div class="download-button-wrapper">
                    <div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE
                        <ul class="dropdown">
                            <li><a href="#">640 x 960</a></li>
                            <li><a href="#">1136 x 640</a></li>
                            <li><a href="#">720 x 1280</a></li>
                        </ul>
                    </div>
                </div>  
                <div class="download-button-wrapper">
                    <div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1600</a></li>
                            <li><a href="#">2048 x 1536</a></li>
                        </ul>
                    </div>
                </div>
            <div style="clear:both"></div>
        </div>

css

/*-----------download buttons------------------------*/
.download-button-wrapper{
    *zoom: 1;
    float: left;
    width: 180px;
    position: relative;
    border: 1px solid #eaedf1;
    color: #9ea7b3;
    background-color: #F9FAFC;
    text-align: center;
    line-height: 44px;
    font-size: .8em;
    margin: 15px 12.700534759358288770053475935829% 0 0;
}
.download-buttons div:nth-child(3){
    float: right;
    margin-right: 0;
}

/* -----------GLOBALS - Dropdowns---------------*/
.downloadFontIcons{
    cursor: pointer;
    outline: none;
}

/*----------actual dropdown list----------------*/
.downloadFontIcons .dropdown{
    /* Size & position */
    position: absolute;
    top: 110%;
    left: 0px;
    right: 0px;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

/*-------Media Queries---------*/
    @media only screen
            and (max-width : 1000px) {
            #wallpaper-wrapper{
                margin-left: 1.0416666666666666666666666666667%;    /* 10px / 960px */
                margin-right: 1.0416666666666666666666666666667%;   /* 10px / 960px */
            }
    }
    @media only screen
            and (max-width : 820px) {
            .download-button-wrapper{
                margin: 15px 10.700534759358288770053475935829% 0 0;
            }
    }

update Fiddle

First, sorry for the messy code/markup. But my problem here is the alignment of my buttons. I'm not able to align them accordingly (left, center, right), and currently I'm using floats to achieve that but when the window is resized the last element drops below even if I'm using % margin to the two buttons. Any other way to achieve this? aligning the buttons left, center and right and making them responsive on the same time.

Answer 1

You can try setting margin: auto on each of the buttons.

If that doesn't work, you can add

.download-buttons {
  display: flex;
  display: ms-flex;
  display: -webkit-flex;
}

to your CSS. It appears to work in the jsfiddle.