| <!doctype html> |
| |
| <style> |
| .test_paragraph { |
| margin-top: 1em; |
| margin-bottom: 1em; |
| text-align: justify; |
| font-size: 10px; |
| font-family: Ahem; |
| -webkit-font-smoothing: none; |
| } |
| |
| /* Created to justify the last line of text in the div */ |
| #paragraph1:after { |
| content: " ____"; |
| line-height: 0; |
| visibility: hidden; |
| } |
| |
| #region1 { |
| border: 1px solid black; |
| width: 390px; |
| height: 80px; |
| padding: 5px; |
| } |
| |
| #first-box1 { |
| border: 1px solid blue; |
| border-bottom: none; |
| } |
| |
| #second-box1 { |
| margin:10px; |
| border: 1px solid green; |
| border-bottom: none; |
| width: 366px; |
| height: 73px; |
| } |
| |
| #first-paragraph2 { |
| margin-top: 0px; |
| } |
| |
| /* Created to justify the last line of text in the div */ |
| #second-paragraph2:after { |
| content: " ____"; |
| line-height: 0; |
| visibility: hidden; |
| } |
| |
| #region2 { |
| border: 1px solid black; |
| width: 290px; |
| height: 80px; |
| padding: 5px; |
| } |
| |
| #first-box2 { |
| border: 1px solid blue; |
| border-top: none; |
| border-bottom: none; |
| } |
| |
| #second-box2 { |
| margin-left:10px; |
| margin-top: -5px; |
| padding: 0px; |
| border: 1px solid green; |
| border-top: none; |
| border-bottom: none; |
| width: 266px; |
| height: 90px; |
| } |
| |
| #first-paragraph3 { |
| margin-top: 0px; |
| } |
| |
| #region3 { |
| border: 1px solid black; |
| width: 390px; |
| height: 80px; |
| padding: 5px; |
| } |
| |
| #first-box3 { |
| border: 1px solid blue; |
| border-top: none; |
| } |
| |
| #second-box3 { |
| margin:10px; |
| margin-top: -5px; |
| border: 1px solid green; |
| border-top: none; |
| width: 366px; |
| } |
| |
| .imgFloat { |
| float: right; |
| background-color:green; |
| } |
| |
| #float1 { |
| width: 130px; |
| height: 63px; |
| } |
| |
| #float2 { |
| width: 30px; |
| height: 37px; |
| } |
| |
| #imgAbsolute { |
| position: absolute; |
| background-color: green; |
| width: 100px; |
| height: 37px; |
| left: 292px; |
| top: 101px; |
| } |
| </style> |
| |
| <div id="content"> |
| <div id="region1"> |
| <div id="first-box1"> |
| <div id="second-box1"> |
| <div class="test_paragraph" id="paragraph1">This <img class="imgFloat" id="float1" src="resources/transparent.png">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</div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="region2"> |
| <div id="first-box2"> |
| <div id="second-box2"> |
| <div class="test_paragraph" id="first-paragraph2">get<img class="imgFloat" id="float2" src="resources/transparent.png"> out of the region. This line of text should not get out of the region.</div> |
| <div class="test_paragraph" id="second-paragraph2">This line of text should not get out of the region. This line of text should not get out of the region.</div> |
| </div> |
| </div> |
| </div> |
| |
| <img id="imgAbsolute" src="resources/transparent.png"> |
| |
| <div id="region3"> |
| <div id="first-box3"> |
| <div id="second-box3"> |
| <div class="test_paragraph" id="first-paragraph3">This line of text should not get out of the region. This line of text should not get out of the region.</div> |
| <div class="test_paragraph" id="second-paragraph3">This line of text should not get out of the region.</div> |
| </div> |
| </div> |
| </div> |
| </div> |
