Legion87 Legion87 - 14 days ago 5
CSS Question

Can't align items in header

I'm trying to align items in my header but can't seem to get them to the way I want. I've tried using

float:right;
etc. but can't get them to align the way I have it in this image:

enter image description here

Here's my fiddle: http://jsfiddle.net/Legion87/g8LLxz7h/

<div class="header">
<div class="wrap">
<div class="header-left">
<div class="logo">
<a href="index.html">Home</a>
</div>
</div>
<div class="header-right">
<div class="top-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
</div>
<div class="sign-ligin-btns">
<ul>
<li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>
<!-- Login Ends Here -->
</li>
<li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></a>
...

Answer

body {
    background:#fff;
    font-family:'arial';
}
/*---start-wrap-----*/
 .wrap {
    width:100%;
    margin:0 auto;
    font-size: 14px;
}
#page {
    display:none;
}
/*---start-header----*/
#header {
    padding: 0.3em 0 0em;
    border-bottom: 50px solid #fff;
    background-color: #fff;
}
.header-left {
    float: left;
    margin-top: -20px;
    margin-bottom: 50px;
    margin-right: 50px;
}
.logo a {
    color: #E95393;
    font-family:'arial';
    font-size: 35px;
}
.header-right {
    float:left;
    width: 50%;
    margin-left: 100px;
}
.top-nav {
    text-align:center;
}
.top-nav ul li {
    border-right: 1px solid #E95393;
    display:inline-block;
}
.top-nav ul li a {
    color: #43C5E6;
    padding: 1.8em 0.8em;
    display: block;
    font-size: 14px;
    margin-right: 10px;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
}
.top-nav ul li a:hover {
    color:#E95393;
}
.top-nav {
    float:left;
}
#sign-ligin-btns {
    margin-left:25%;;
    margin-right:65%:
    vertical-align: top;
    margin-top: 30px;
}
#sign-ligin-btns ul li {
    display:inline-block;
}
#sign-ligin-btns ul li a.signup span, #sign-ligin-btns ul li a.login span {
    padding: 0.5em 1.8em 0.55em 1.8em;
    display: block;
    font-size: 1em;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    border-radius: 0.15em;
    -webkit-border-radius: 0.15em;
    -moz-border-radius: 0.15em;
    -o-border-radius: 0.15em;
}
#sign-ligin-btns ul li a.signup {
    color:#000;
}
#sign-ligin-btns ul li a.signup:hover {
    background: #43C5E6;
}
#sign-ligin-btns ul li a.login {
    color:#000;
}
#sign-ligin-btns ul li a.login:hover {
    background: #43C5E6;
}
/*---End-header----*/
<div id="sign-ligin-btns">
  <ul>
    <li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>

      <!-- Login Ends Here -->
    </li>
    <li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></a>

    </li>
  </ul>
</div>
<div id="header">
  <div class="wrap">
    <div class="header-left">
      <div class="logo">	<a href="index.html">Home</a>

      </div>
    </div>
    <div class="header-right">
      <div class="top-nav">
        <ul>
          <li><a href="index.html">Home</a>

          </li>
          <li><a href="about.html">About</a>

          </li>
          <li><a href="design.html">Design</a>

          </li>
          <li><a href="store.html">Store</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
</div>