<!doctype html> | |
<style> | |
#content { | |
-webkit-flow-into: flow1; | |
padding: 5px; | |
} | |
#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; | |
-webkit-flow-from: flow1; | |
} | |
#region1 { | |
width: 180px; | |
height: 90px; | |
} | |
#region2 { | |
width: 400px; | |
height: 90px; | |
margin-left: 100px; | |
margin-top: 50px; | |
} | |
#region3 { | |
width: 400px; | |
height: 90px; | |
margin-left: 50px; | |
margin-top: 50px; | |
} | |
#floatcontainer { | |
height: 84px; | |
} | |
</style> | |
<p>In the example below, the green float should be at the top of the first region and on the left. It should spill into region two. | |
The orange float should be on the right at the top of region two.</p> | |
<div id="content"> | |
<div id="first-box"> | |
<div id="second-box"> | |
<p id="floatcontainer"><img id="float1"><img id="float2"> | |
<p>This line of text should not get out of the region. This line of text should not get out of the region.</p> | |
<p>This line of text should not get out of the region. This line of text should not get out of the region.</p> | |
<p>This line of text should not get out of the region.</p> | |
</div> | |
</div> | |
</div> | |
<div id="container"> | |
<div id="region1"></div> | |
<div id="region2"></div> | |
<div id="region3"></div> | |
</div> |