I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display images with rounded corners, and a center DIV for the text content. Ideally, I would like the center DIV in each column to expand vertically in proportion to the text.
Below is my CSS code:
.main_bkgd_tp_img {
background: url(../images/text.main.tp.gif);
float:left;
width: 400px;
height: 20px;
}
.main_bkgd_btm_img {
background: url(../images/text.main.btm.gif);
float:left;
width: 400px;
height: 20px;
}
.mainbody {
background: url(../images/text.main.fill.gif);
position:relative;
float:left;
width: 400px;
height: 300px;
}
.mainbody .text {
position:absolute;
top:10px;
left:20px;
width:95%;
}
.mainbody p {
position:relative;
font:normal 12px verdana, arial, helvetica, sans-serif;
color:#000;
line-height:15px;
}
.mainbody h1, h2 {
position:relative;
color:#000;
line-height:15px;
}
.rtcol_bkgd_tp_img {
background: url(../images/rtcol.main.tp.gif);
float:right;
width: 100px;
height: 20px;
}
.rtcol_bkgd_btm_img {
background: url(../images/rtcol.main.btm.gif);
float:right;
width: 100px;
height: 20px;
}
.rtcolbody {
background: url(../images/rtcol.main.fill.gif);
position:relative;
float:right;
width: 100px;
height: 300px;
}
.rtcolbody .text {
position:absolute;
top:10px;
right:20px;
width:95%;
}
.rtcolbody p {
position:relative;
font:normal 12px verdana, arial, helvetica, sans-serif;
color:#000;
line-height:15px;
}
.rtcolbody h1, h2 {
position:relative;
color:#000;
line-height:15px;
}
Here is my HTML layout:
<div class="main_bkgd_tp_img"></div>
<div class="mainbody">
<div class="text">
<h4> This placeholder text is for testing purposes only. Actual content will be added later.</h4>
<h4> More placeholder text for testing purposes. Additional content will follow.</h4>
</div>
</div>
<div class="main_bkgd_btm_img"></div>
<div class="rtcol_bkgd_tp_img"></div>
<div class="rtcolbody">
<div class="text">
<h4> Test content. </h4> <br/>
<h4>This text is for testing purposes only. Real content coming soon. </h4>
</div>
</div>
<div class="rtcol_bkgd_btm_img"></div>
To view the work-in-progress page, click here.
Thank you!
I believe I have resolved the issue. I modified each "rtcol_...." CSS entry by replacing "float:right" with "margin-left: 420px."
I still need assistance on how to make the middle DIV automatically expand based on the text content.
Appreciate your help!