Question

I have div bar that is set to not scroll so it will always show up on top of the website. Inside of this bar I have another div box that has two more buttons inside that are floated right so they are always on the top right.

The problem is I want the buttons to be centered top right not top right of the page. Instead if the body elements are centered the buttons would then be top right of the centered elements.

HERE IS THE CODE:

<DIV class="fixedtop">
        <div class="language2">
            <div class="english"> <font id="buttontxt">ENGLISH</font></div>

            <div class="spanish"> <font id="buttontxt">SPANISH</font></div>

        </div>
    </DIV>

Here is the CSS for the top bar:

   .fixedtop
{
    position: fixed;
    margin-left: 0 auto;
    margin-right: 0 auto;
    top: 0px;
    width:600px;
    height: 30px;
}



.language2
{
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    width: 600px;
    height: 30px;
    margin-right: 0px;
}

.spanish
{
    background-color:00ADEF;
    float: right;
    margin-right: 4px;
    padding-top: 10px;
    display: inline-block;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);
}

.english
{
    background-color:00ADEF;
    float: right;
    margin-right: 15px;
    display: inline-block;
    padding-top: 10px;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);


}

Answer 1

margin-left and margin-right accept only 1 parameter, not two as you’re trying to pass in. Unfortunately, you can’t use margin: 0 auto to centre a fixed element in CSS.

Hence, you have to set the left position to 50%, and then set the left margin to be negative half of the width of the element:

.fixedtop
{
    position: fixed;
    top: 0;
    left: 50%
    width: 600px;
    height: 30px;
    margin-left: -300px;
}