How to vertically align and float two text boxes (left and right) in scaling header

Question

/* Importing Amaranth Font for menu text */

@import url(http://fonts.googleapis.com/css?family=Amaranth);
 header,
a,
img,
li {
  transition: all 1s;
  -moz-transition: all 1s;
  /* Firefox 4 */
  -webkit-transition: all 1s;
  /* Safari and Chrome */
  -o-transition: all 1s;
  /* Opera */
  color: white!important;
}
/* Basic layout */

body {
  background-color: #ebebeb;
}
ul {
  list-style-type: none none none!important;
  display: inline-block;
  vertical-align: middle;
}
li {
  display: inline;
}
img.logo {
  width: 200px;
  margin-left: 10px;
  padding-right: 10px;
}
nav {
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  line-height: 100px;
}
.header ul li {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  margin-left: 35px;
  letter-spacing: 3px;
}
section.stretch {
  float: left;
  height: 1500px;
  width: 100%;
}
section.stretch p {
  font-family: 'Amaranth', sans-serif;
  font-size: 30px;
  color: #969696;
  text-align: center;
  position: relative;
  margin-top: 250px;
}
section.stretch p.bottom {
  top: 100%;
}
header {
  background: black;
  border-bottom: 1px solid #aaaaaa;
  float: left;
  width: 100%;
  position: fixed;
  z-index: 10;
  background: #7f7f7f;
  background: rgba(0, 0, 0, 0.5);
}
header a {
  color: #969696;
  text-decoration: none;
  font-family: 'Amaranth', sans-serif;
  text-transform: uppercase;
}
header a.active,
header a:hover {
  color: #3d3d3d;
}
header li {
  margin-right: 30px;
}
/* Sizes for the bigger menu */

header.large {
  height: 220px;
}
header.large img {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
header.large li {
  margin-top: 15px;
}
/* Sizes for the smaller menu */

header.small {
  height: 90px;
}
header.small img {
  width: 85px;
  height: 85px;
  margin-top: 5px;
}
header.small li {
  margin-top: 2px;
}
header.small.left {
  color: yellow!important;
  margin-top: 48px;
}
a.left {
  color: white!important;
  margin-top: 98px;
}
a.right {
  margin-left: 75%;
  color: white!important;
  margin-top: 98px;
}

<header class="large">
  <nav>
    <img class="logo" src="img/header_left.jpg" />

    <li><a class="left" href="#">Michael Beiruit</a><a class="right" href="#">Thames & Hudson</a>
    </li>


  </nav>
</header>

I am working on the following website: http://gregorydanelian.comule.com/ken/

I want the text to float left and right but on browser resize the text cuts off to different lines.

How can I prevent browser resizing cutting text off to a different line?

Answer 1

Thanks all...I seem to have been able to fix the issue by giving the right float div an absolute position and floating it right. The vertical-align middle works on the a.left but conflicts with a.right as it is floated - changing the line-height helped with this - if you are having problems with vertical-align middle and floats try playing with the line-height.

See link below for results: Working Link

The only thing that I now have an issue with is that when the browser is resized to below 530 px the a.left and a.right li's overlap and then drop under the logo image...pushing this up beyond the top of the browser window. I want the logo and a.left and a.right to all show on the same line at all times. I've tried min-width on different divs but to no avail.

I may have to start up a new question to answer this if it cannot be answered here.

Thanks again!