| <!doctype html> |
| |
| <style> |
| #content { |
| -webkit-flow-into: flow1; |
| text-align: justify; |
| padding: 5px; |
| font-size: 10px; |
| font-family: Ahem; |
| -webkit-font-smoothing: none; |
| border: 2px solid red; |
| } |
| |
| #first-box { |
| border: 3px solid blue; |
| background-color: #ffff00; |
| } |
| |
| #second-box { |
| margin:10px; |
| border: 6px solid green; |
| background-color: #ffffaa; |
| } |
| |
| #float1 { |
| float: right; |
| width: 130px; |
| height: 100px; |
| background-color:green; |
| border: 2px solid red; |
| } |
| |
| #region1, #region2, #region3 { |
| border: 3px solid black; |
| border-left: 10px solid black; |
| -webkit-flow-from: flow1; |
| } |
| |
| #region1 { |
| width: 400px; |
| height: 90px; |
| margin-left: 50px; |
| } |
| |
| #region2 { |
| width: 300px; |
| height: 90px; |
| margin-top: 70px; |
| } |
| |
| #region3 { |
| width: 400px; |
| height: 120px; |
| margin-top: 50px; |
| margin-left: 20px; |
| } |
| </style> |
| |
| <div id="content"> |
| <div id="first-box"> |
| <div id="second-box"> |
| <p>This line of text<img id="float1" src="resources/transparent.png"> should not get out of the region. This line of text should not get out of the region. 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. 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> |
