<!doctype html>

 <style>

    #content {
        padding: 5px;
        border: 1px solid red;
    }
   
    #float1 {
        float: left;
        width: 150px;
        height: 100px;
        background-color:green;
    }
    
    #float2 {
        float:right;
        width:200px;
        height:30px;
        background-color:orange
    }

    #region1, #region2, #region3 {
        border: 1px solid black;
        margin: 10px;
    }
 
    #region1 {
        margin-left: 30px;
        width: 180px;
        height: 90px;
    }
    
    #region2 {
        margin-top: 80px;
        width: 400px;
        height: 90px;
    }

   	p.flow1 {
		clear:both;
		margin-bottom: 0px;
	}

	p.flow2 {
		margin-top: 0px;
	}
	
</style>

<p>In the example below, the green float should be at the top of the first region and on the left. It should overflow the first region.
The orange float should be right aligned under the green float and should overflow the first region because their containing block (red border) is flowed only in the first region.</p>
<p>No content should be displayed in the second region.</p>

<div id="region1">
    <div id="content">
        <img id="float1"><img id="float2">
    </div>
</div>
<div id="region2"></div>