| <!DOCTYPE html> |
| <style> |
| .line { clear:both; } |
| .fakeColumn { float:left; width:95px; margin-right:10px; } |
| .wide { width:200px; } |
| .egg { background:yellow; } |
| .egg::before { content:"egg"; } |
| .sausage { background:brown; } |
| .sausage::before { content:"sausage"; } |
| .spam { background:hotpink; } |
| .spam::before { content:"spam"; } |
| .lobster { background:salmon; } |
| .lobster::before { content:"lobster"; } |
| </style> |
| <p>Below there should be 4 rows of boxes. The boxes on each row should have the same color. |
| Some boxes are expected to be wider than others.</p> |
| <div style="line-height:30px;"> |
| <div class="line"> |
| <div class="fakeColumn egg wide"></div> |
| <div class="fakeColumn egg"></div> |
| <div class="fakeColumn egg"></div> |
| <div class="fakeColumn egg"></div> |
| <div class="fakeColumn egg"></div> |
| </div> |
| <div class="line"> |
| <div class="fakeColumn sausage"></div> |
| <div class="fakeColumn sausage"></div> |
| <div class="fakeColumn sausage"></div> |
| <div class="fakeColumn sausage"></div> |
| <div class="fakeColumn sausage"></div> |
| <div class="fakeColumn sausage"></div> |
| </div> |
| <div class="line"> |
| <div class="fakeColumn spam wide"></div> |
| <div class="fakeColumn spam"></div> |
| <div class="fakeColumn spam"></div> |
| <div class="fakeColumn spam"></div> |
| <div class="fakeColumn spam"></div> |
| </div> |
| <div class="line"> |
| <div class="fakeColumn lobster"></div> |
| <div class="fakeColumn lobster"></div> |
| <div class="fakeColumn lobster"></div> |
| <div class="fakeColumn lobster"></div> |
| <div class="fakeColumn lobster wide"></div> |
| </div> |
| </div> |
