Css float messes up layout

Question

I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. If I do it without a table, the float causes the elements inside the box appear outside. How do i make this work?

<div style="width: 100%; border-style:solid;">
  <span style="float: left;">  
     <h3> Your appointment Details</h3>
  </span>
  <span style="float: right;">
     <img src="someImage"/>
  </span>
</div>

Answer 1

Add this to the parent container:

.parent {
    overflow: hidden;
}

<div class="parent" style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

jsfiddle with example of solution

Answer 2

The answer by Billy Moat is the right way to do it. To add on there is another way also. You could add an empty element to the end of the parent element with its float cleared. i.e

.dummyClear{
   clear:both
}

<div style="width: 100%;border-style:solid;">    
    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>
    <div class="dummyClear"></div> <!-- Any tag is fine -->

</div>