Hello,
I am running into trouble with a background image that is being placed at the bottom of a content div on my website. Please see the attached image to see what I am looking at.
It seems that the background is not actually picking up the bottom of the overall div. The interesting thing is that when you increase the number of lines in the middle, the background moves down toward the bottom, but it is ignoring the image and the option menu that are floating (is this perhaps part of the problem?).
CSS:
.box_whole { width:740px; margin:0 10px 10px 0; float:left; background:url(
http://bizhorizon.com/images/box_bg_whole.gif) repeat-y;}
.box_whole .box_t { background:url(
http://bizhorizon.com/images/box_t_whole.gif) no-repeat top;}
.box_whole .box_b { background:url(
http://bizhorizon.com/images/box_b_whole.gif) no-repeat bottom; padding:0 0 10px 0; vertical-align:baseline;}
.box_whole h2 { margin:0 0 10px 0; padding:11px 0 11px 20px; color:#616161; font:normal 18px Arial, Helvetica, sans-serif;}
.box_whole img { float:left; padding:15px;}
.box_whole p { margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em;}
.box_whole a { font:normal 11px Arial, Helvetica, sans-serif; color:#0092dd; line-height:1.8em;}
.box_whole a.more { padding:0 10px; font:bold 11px Arial, Helvetica, sans-serif; color:#0092dd; line-height:1.8em; text-decoration:none;}
.box_whole .objectimage { float:left; }
.box_whole .objecttext { float:left; width:200px; }
.box_whole .objectoptions { float:right; width:150px;}
.box_whole p.objectoptions { margin:2px 0px 0px 0px; }
.box_whole a.objectoptions { margin:0px 0px 0px 0px; }
.box_whole .link { border-bottom:#B0BEC7 1px solid; margin:0px 10px -5px 10px;}
HTML:
<div>
<div class="box_whole">
<div class="box_t">
<div class="box_b">
<h2>Whole with Data</h2>
<!-- START DATA DISPLAY -->
<div class="objectimage">
<img src="http://bizhorizon.com/images/service_1.png" alt="picture desc" width="120" />
</div>
<div class="objectoptions">
<div class="link">
<p><a href="#">Option 1</a></p>
</div>
<div class="link">
<p><a href="#">Option 1</a></p>
</div>
<div class="link">
<p><a href="#">Option 1</a></p>
</div>
<div class="link">
<p><a href="#">Option 1</a></p>
</div>
</div>
<div>
<p><strong>Line 1</strong></p>
<p>Line 2<br /></p>
</div>
</div>
</div>
</div>
</div>
After working on this for a few hours I am stumped, and would love assistance with this problem if anyone knows a good way to get around the problem I am running into.
John
Linear Mode
