| <!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; |
| } |
| |
| .region { |
| border: 3px solid black; |
| border-left: 10px solid black; |
| } |
| |
| .content { |
| border: 2px solid red; |
| padding: 5px; |
| } |
| |
| .first-box { |
| border: 3px solid blue; |
| background-color: #ffff00; |
| } |
| |
| .second-box { |
| border: 6px solid green; |
| background-color: #ffffaa; |
| } |
| |
| #region1 { |
| width: 400px; |
| height: 90px; |
| margin-left: 50px; |
| } |
| |
| #content1 { |
| border-bottom: none; |
| height: 78px; |
| } |
| |
| #first-box1 { |
| border-bottom: none; |
| height: 80px; |
| } |
| |
| #second-box1 { |
| margin:10px; |
| border-bottom: none; |
| height: 64px; |
| } |
| |
| #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 { |
| width: 300px; |
| height: 90px; |
| margin-top: 70px; |
| } |
| |
| #content2 { |
| border-bottom: none; |
| border-top: none; |
| height: 85px; |
| padding-top: 0px; |
| } |
| |
| #first-box2 { |
| border-top: none; |
| border-bottom: none; |
| padding-left: 10px; |
| padding-right: 10px; |
| } |
| |
| #second-box2 { |
| border-top: none; |
| border-bottom: none; |
| height: 90px; |
| } |
| |
| #first-paragraph3 { |
| margin-top: 0px; |
| } |
| |
| #region3 { |
| width: 400px; |
| height: 120px; |
| margin-top: 50px; |
| margin-left: 20px; |
| } |
| |
| #content3 { |
| border-top: none; |
| aheight: 109px; |
| padding-top: 0px; |
| } |
| |
| #first-box3 { |
| border-top: none; |
| padding-left: 10px; |
| padding-right: 10px; |
| padding-bottom: 10px; |
| } |
| |
| #second-box3 { |
| border-top: none; |
| } |
| |
| #float1 { |
| float: right; |
| background-color:green; |
| border: 2px solid red; |
| width: 130px; |
| height: 100px; |
| } |
| </style> |
| |
| <div> |
| <div class="region" id="region1"> |
| <div class="content" id="content1"> |
| <div class="first-box" id="first-box1"> |
| <div class="second-box" id="second-box1"> |
| <div class="test_paragraph" id="paragraph1">This <img 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</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="region" id="region2"> |
| <div class="content" id="content2"> |
| <div class="first-box" id="first-box2"> |
| <div class="second-box" id="second-box2"> |
| <div class="test_paragraph" id="first-paragraph2">region. 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-paragraph2">This line of text should not get out of the region. This line of</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="region" id="region3"> |
| <div class="content" id="content3"> |
| <div class="first-box" id="first-box3"> |
| <div class="second-box" id="second-box3"> |
| <div class="test_paragraph" id="first-paragraph3">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 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> |
| </div> |
