Css float messes up layout

css

Solution

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

Problem

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> ```

Original source