How to position two divs on either side of the screen, HTML, CSS

How can I position two divs on the same line on either side of the screen? I.e. one is floated left and the other floated right? When I try to do this the containing div gets cut in half.

Heres my code: http://jsfiddle.net/xy0pj0f9/

<div class="wrapper">
  <div class="top-panel-sub">
    <div class="port-name">
      <h3>Name</h3> 
    </div>
    <div class="admincp-button">
      <img src="themes/images/loginsml.png"/>
    </div>
  </div>
</div>

.top-panel-sub {
background-color: #bf2f1b;
color:#fff;
padding-top:10px;
padding-bottom:10px;
padding-right:5px;
padding-left:5%;
font-family:Trajan-Pro-Bold;
}
.port-name {
    display:block;
    float:left;
}
.port-name h3{
    display:block;
}
.admincp-button {
    display:block;  
}

Solution

Floated elements don't provide any stack flow so you need to override the overflow rule to tell the parent to behave as if the floated children were not floated.

Just add overflow : hidden; or overflow : auto; to the .top-panel-sub container.

http://jsfiddle.net/xy0pj0f9/1/