| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 330px; |
| height: 200px; |
| border: 3px solid #bbb; |
| line-height: 20px; |
| } |
| .left, .right { |
| padding: 5px 5px; |
| background-color: steelblue; |
| } |
| .float_content { |
| background-color: skyblue; |
| } |
| .left { float: left; } |
| .right { float: right; } |
| .column1, .column2 { |
| float: left; |
| width: 160px; |
| } |
| .column1 { |
| margin-right: 10px; |
| } |
| .column1 > .left, .column1 > .right { |
| height: 110px; |
| } |
| .column2 > .left, .column2 > .right { |
| padding-top: 0; |
| } |
| </style> |
| |
| <p>There should be two floats: one left, one right. Both should wrap into the |
| second column. The lines <em>left6</em>, <em>left7</em>, |
| <em>right6</em>, <em>right7</em> (and their backgrounds) should appear |
| <em>entirely</em> in the second column.</p> |
| <div class="multicol"> |
| <div class="column1"> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| <div class="left"> |
| <span class="float_content"> |
| left1<br> |
| left2<br> |
| left3<br> |
| left4<br> |
| left5<br> |
| </span> |
| </div> |
| <div class="right"> |
| <span class="float_content"> |
| right1<br> |
| right2<br> |
| right3<br> |
| right4<br> |
| right5<br> |
| </span> |
| </div> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| First<br> |
| </div> |
| <div class="column2"> |
| <div class="left"> |
| <span class="float_content"> |
| left6<br> |
| left7<br> |
| </span> |
| </div> |
| <div class="right"> |
| <span class="float_content"> |
| right6<br> |
| right7<br> |
| </span> |
| </div> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| Second<br> |
| </div> |
| </div> |
