Question

i’ve run out of idea’s on this one so looking for some help to get this to work. Or maybe confirmation its not possible and a suggestion how i should do it!

I’m re-styling a wordpress site and have added siv’s on the left and the right of the main content to position the outside images of a border.

My problem is that i cannot get the div’s to expend to the height of the parent!

Here is the layout:

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
<br style="clear:both">
</div>

and the CSS:

.content_botbg {
background: none repeat-x scroll center bottom transparent;
border-bottom: 0 solid #EFEFEF;
margin: 0 auto;
min-height: 600px;
padding: 0;
text-align: left;
width: 988px;
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    float: left;
    width: 24px;
}

.content_res {
    background: url("images/transparent_background.png") repeat scroll 0 0 transparent;
    float: left;
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    float: left;
    width: 23px;
}

Hoping someone can assist as i’ve been tearing my hair out.

Thanks,

Ryan

Answer 1

It should work by removing the floats and using some absolute positioning (see fiddle). It seems like your right side should also be width: 24px based off your overall width, but I kept it at 23px (per your code) so it has a 1px gap in the fiddle example, but that is easily corrected if it is off.

HTML

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
</div>

CSS

.content_botbg {
   border-bottom: 0 solid #EFEFEF;
   margin: 0 auto;
   padding: 0;
   text-align: left;
   width: 988px;
   position: relative; /* added */
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    left: 0; /* added */
    width: 24px;
    min-height: 600px; /* moved from content_botbg */
}

.content_res {
    background: url("images/transparent_background.png") repeat scroll 0 0 transparent;
    /* removed float */
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    right: 0; /* added */
    width: 23px;
}