| <html> |
| <head> |
| <style> |
| .black { |
| border:10px solid black; |
| margin: 1em 0; |
| height:220px; |
| width:700px; |
| } |
| |
| .blue { |
| float:left; |
| width:1500px; |
| height:100px; |
| background-color: blue; |
| } |
| |
| .green { |
| float:left; |
| width:1500px; |
| height:100px; |
| background-color: green; |
| } |
| |
| .bluesnug { |
| float:left; |
| width:698px; |
| height:100px; |
| background-color: blue; |
| } |
| |
| .greensnug { |
| float:left; |
| width:698px; |
| height:100px; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body > |
| In all of the examples, you should be able to see blue and green rectangles that spill way out of their |
| containing blocks. They should be 100px tall and not overlap one another at all. They should be stacked |
| vertically. |
| |
| <div class="black"> |
| You should see blue and green rectangles below.<br> |
| <div class="blue"></div> |
| <div class="green"></div> |
| </div> |
| |
| <div class="black"> |
| You should see blue and |
| <div class="blue"></div> |
| <div class="green"></div> |
| green rectangles below. |
| </div> |
| |
| <div class="black"> |
| <div class="blue"></div> |
| <div class="green"></div><br> |
| You should see blue and green rectangles above. |
| </div> |
| |
| |
| <div class="black"> |
| <div class="blue"></div> |
| <div class="green"></div> |
| You should see blue and green rectangles above. |
| </div> |
| |
| <div class="black"> |
| <div class="blue"></div> |
| You should see blue above and green below. |
| <div class="green"></div> |
| </div> |
| |
| <div class="black"> |
| <div class="blue"></div> |
| You should see blue above and green below.<br> |
| <div class="green"></div> |
| </div> |
| |
| The next examples should have blue and green rectangles that snugly fit without spilling out. |
| |
| <div class="black"> |
| You should see blue and green rectangles below.<br> |
| <div class="bluesnug"></div> |
| <div class="greensnug"></div> |
| </div> |
| |
| <div class="black"> |
| You should see blue and green rectangles below. |
| <div class="bluesnug"></div> |
| <div class="greensnug"></div> |
| </div> |
| |
| <div class="black"> |
| <div class="bluesnug"></div> |
| <div class="greensnug"></div><br> |
| You should see blue and green rectangles above. |
| </div> |
| |
| <div class="black"> |
| <div class="bluesnug"></div> |
| <div class="greensnug"></div> |
| You should see blue and green rectangles above. |
| </div> |
| |
| <div class="black"> |
| <div class="bluesnug"></div> |
| You should see blue above and green below. |
| <div class="greensnug"></div> |
| </div> |
| |
| <div class="black"> |
| <div class="bluesnug"></div> |
| You should see blue above and green below.<br> |
| <div class="greensnug"></div> |
| </div> |
| |
| |
| </body> |
| </html> |
