Center one element and right-align another on the same row

Question

I have two boxes. One on the left and one on the right of the page.

The one on the left has login + register.

One on the right has two images.

I'm trying to align the left one to the center of the page with its contents aligned horizontally i.e. one one line.

I'm trying to get the right box to the right side of the page with its contents on one line, too.

My Fiddle

#topjob {
  width: 100%;
  text-align: center;
}
#left {
  float: left;
  width: 500px;
  height: 50px;
  background: #ff0000;
}
#right {
  width: 100%;
  display: inline-block;
  margin-right: auto;
  margin-left: 100px;
  width: 100px;
  height: 50px;
  background: #00ff00;
}
#center ul li {
  float: right;
  width: 200px;
  height: 50px;
  background: #0000ff;
}

<div class="header_top">
  <!--header_top-->
  <div class="container">
    <div class="row">
    </div>
    <div id="topjob">
      <div id="left">
        <ul>
          <li><a href="#"><i class=""></i>LOGIN</a>
          </li>
          <li><a href="#"><i class=""></i>REGISTER</a>
          </li>
        </ul>
      </div>
      <div id="right">
        <ul>
          <li>
            <a href="index.html">
              <img src="images/mastercard.png" alt="" />
            </a>
            <li>
              <a href="index.html">
                <img src="images/visa.png" alt="" />
              </a>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

You can efficiently accomplish this task with CSS Flexbox.

#topjob {
  display: flex;                /* make container a flexbox */
  justify-content: center;      /* center child elements ("flex items") */
  position: relative;           /* establish nearest positioned ancestor for
                                   absolute positioning. */
}
#left {
  width: 500px;
  height: 50px;
  background: #ff0000;
}
#right {
  width: 100px;
  height: 50px;
  background: #00ff00;
  position: absolute;            /* remove box from the normal flow */
  right: 2%;                     /* position to the right */
}
#left > ul,
#right > ul {
  display: flex;                /* will align flex items (li) in a row by default */
  justify-content: flex-start;  /* align li's starting from the left edge */
  list-style-type: none;
  padding: 0;
}
#left > ul li,
#right > ul li {
  margin: 10px;
}

<div id="topjob">
  <div id="left">
    <ul>
      <li><a href="#"><i class=""></i>LOGIN</a></li>
      <li><a href="#"><i class=""></i>REGISTER</a></li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li>
        <a href="index.html">
          <img src="images/mastercard.png" alt="">
        </a>
        <li>
          <a href="index.html">
            <img src="images/visa.png" alt="">
          </a>
    </ul>
  </div>
</div>

jsFiddle

Answer 2

If you’re interested in learning flexbox there is a far better way to do accomplish this. (The accepted answer is fairly involved and will break on many devices including mobile phones.)

header {
  display: flex;
  align-items: center;
  height: 50px;
  background: gold;
}

nav {
  display: block;
  background: red;
  flex: 1;
}

nav a {
  text-transform: uppercase;
}

nav + div {
  background: lawngreen;
  flex: 0 0 auto;
}

<header>
      <nav>
          <a href="#">Login</a>
          <a href="#">Register</a>
      </nav>
      <div>
          <img src="images/mastercard.png">
          <img src="images/visa.png">
      </div>
</header>

I’ve also improved your HTML to be more friendly to screen readers and search engines.