| <!DOCTYPE html> |
| <style> |
| body { |
| -webkit-writing-mode: vertical-lr; |
| } |
| .multicol { |
| height: 330px; |
| width: 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; |
| height: 160px; |
| } |
| .column1 { |
| margin-bottom: 10px; |
| } |
| .column1 > .left, .column1 > .right { |
| width: 110px; |
| } |
| .column2 > .left, .column2 > .right { |
| padding-left: 0; |
| } |
| </style> |
| <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> |
