How would I make 2 divs float next to each other but not have the content underneath follow suit?

Question

I have this setup, with HTML:

<h4 class="wrap-title">Name</h4>
                    <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()"><span class="glyphicon glyphicon-upload"></span> Upload</button>    
                    <p>{{venue.name}}</p>

and CSS:

.wrap-title {
  float:left;
  margin-right: 5px;
}

.title-button {
  cursor: pointer;
  margin: 10px 0px;
  float:none;
}

How would I go about having the Creams be underneath "Name"? Thanks in advance! I can't for the life of me figure out how for some reason.

Answer 1

It might be a little cleaner to wrap the floats in a div and use a the clearfix

<div class="clearfix">
   <h4 class="wrap-title">Name</h4>
   <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()">
       <span class="glyphicon glyphicon-upload"></span> Upload
    </button>    
</div>
<p>{{venue.name}}</p>

here the clearfix css

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

Here is the explanation given in the html5 boilerplate

Clearfix: contain floats For modern browsers

1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the clearfix class.
2. The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.

Answer 2

You need to clear the float:

p {
clear:left:
}