以下は、現時点で得ているものと達成したいもののスクリーンショットです。2番目の画像は、説明のためにピクセルで高さを手動で増やすことで実現できましたが、コンテナ内のコンテンツのサイズから自動的に実現したいと考えています。(そして、はい、以前にこの質問を投稿しましたが、誤って間違った html および css コーディングを投稿しました)。
画像1:
画像2:
HTML:
<div id="top-body" style="clear:both">
<div class="content" style="clear:both;">
<div class="services_text">
<h1><span class="red">CLASSES</span></h1>
<p class="classes">Dixon - Woods School of Dance train children from the age of 3 years upwards. All lessons consist of ballet, tap and modern/ jazz. Separate lessons are given in acrobatic and lyrical. </p>
<br><p class="classes">All Newbold Verdon children attend on Tuesdays. Oadby pupils attend Saturdays and mid-week for stage class lessons. </p>
<br><p class="classes">All pupils study the British Theatre Dance Association Syllabus, the school boasts an exceptionally high standard. To date the school has a 100% pass rate in examinations and medals with the above association with many children gaining the highest mark of distinction. </p>
<br><p class="classes">Children who wish to take their dancing further, attend stage class lessons. Stage class gives the opportunity for pupils to represent the school in dance festivals and is a further commitment to the school as they are also part of a troupe who dance for the school in competitions. Stage class pupils are also more involved in our annual show. </p>
<br><p class="classes">Adult tap lessons are availible on wednesday evenings, your never to old to start..! </p>
<br><p class="classes">For further details please contact us, via our contact us section. </p>
</div>
<div class="services_outer">
<div class="services_text_padding"><span class="services_text_1">KITCHEN & BATHROOM DESIGN</span></div>
<div class="services_text_padding"><span class="services_text_1">SOLID WOOD<br>
& LAMINATE FLOORING</span></div>
<div class="services_text_padding"><span class="services_text_1">PLYWOOD,<br>
MDF & TIMBER CUTTING</span></div>
<div class="services_text_padding"><span class="services_text_1">KEY CUTTING SERVICES</span></div>
<div class="services_text_padding"><span class="services_text_1">POWER TOOL REPAIRS & SHARPENING</span></div>
</div>
</div>
</div>
<div id="footer1">
<div id="footer-image">
</div>
</div>
CSS:
#top-body {
margin: 0 auto;
background-color: #ffffff;
height: auto;
width: 960px;
padding-top: 7px;
}
.content {
width: 960px;
padding: 0 1px 0 1px;
margin: 0 3px;
height: 351px;
}
.services_text {
width: 207px;
float: left;
padding: 17px 0px 0 20px;
}
h1 {
font-size: 1.1em;
font-weight: normal;
margin: 0;
color: #000;
padding-bottom: 10px;
font-style: normal;
}
.red {
color: #b5111a;
}
.services_outer {
width: 679px;
height: 351px;
background: url(../images/classes.png) 0 0 no-repeat;
margin: 1px 0 0 42px;
float: left;
}
.services_text_padding {
padding: 247px 0 0 13px;
float: left;
width: 126px;
}
.services_text_1 {
color: #FFF;
font-size: 1em;
line-height: 1.3;
}
p.classes {
font-size: 0.7em;
font-weight: normal;
margin: 0;
color: #000;
line-height: 1.3;
font-style: normal;
padding-bottom: 4px;
}