Making Background Image display in outer DIV

Hi,

I wonder if someone could help me with this problem. First I think it would help to give you a snippet of code

<div id='processBox' style="background:url('/images/hobbies/web_design/process_three_stripe_bg.png') repeat-y;">
<div id='processIconBox' style="position:relative; float:left; width:99px">
<img src='/images/hobbies/web_design/process_plan.jpg' alt='Plan' />
</div>
<div id='processDescriptionBox' style="position:relative; float:left; width:460px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lobortis, nibh vel
accumsan luctus, tortor purus ultrices leo, porta laoreet erat risus a eros. Nulla
commodo velit. Nunc est velit, feugiat non, posuere id, pharetra nec, risus.
Vestibulum placerat vehicula dolor. Quisque quis turpis. Nam fringilla scelerisque
metus. Nullam porta dui sit amet eros.
</div>
</div>

OK now with this code, the image contained within "processIconBox" will have a fixed size, therefore the div will set itself to whatever the height of the image is.
The content contained within "processDescriptionBox" will have varying size.

Now I want the outer div, "processBox", to display a background all the way down the left-hand side, no matter how much text is contained within "processDescriptionBox".

As the code is above, the background does not display. This is a problem I have found over and over again. The only solution I have come across is to add some text directly into "processBox" e.g.


<div id='processBox' style="background:url('/images/hobbies/web_design/process_three_stripe_bg.png') repeat-y;">
<div id='processIconBox' style="position:relative; float:left; width:99px">
<img src='/images/hobbies/web_design/process_plan.jpg' alt='Plan' />
</div>
<div id='processDescriptionBox' style="position:relative; float:left; width:460px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lobortis, nibh vel
accumsan luctus, tortor purus ultrices leo, porta laoreet erat risus a eros. Nulla
commodo velit. Nunc est velit, feugiat non, posuere id, pharetra nec, risus.
Vestibulum placerat vehicula dolor. Quisque quis turpis. Nam fringilla scelerisque
metus. Nullam porta dui sit amet eros.
</div>
I AM SOME TEXT
</div>

Now this makes the background display however I have some text there spoiling the layout. Of course I could add <br style='clear:both' /> instead but this adds an extra line in IE -> also spoiling the layout.

So... is there a way I can get my background to display without adding this 'junk' text?

Thanks,
d418rf

I believe that you do need to have some text to make a background show up...

However, just set your text like this

p.text_to_show_bg
{
font-size 1%;
}

then in your HTML

<div class="the one where I want the bg to show">
<p class="text_to_show_bg">&nbsp;</p>
</div>

I believe that you do need to have some text to make a background show up...

However, just set your text like this

p.text_to_show_bg
{
font-size 1%;
}

then in your HTML

<div class="the one where I want the bg to show">
<p class="text_to_show_bg">&nbsp;</p>
</div>
I tried your method. However, this is no better than adding br clear:both as I have been doing since the browser still makes the line too high. Thanks anyway.

Anyone know of some other way of doing it?

Thanks,
d418rf

FYI: I have decided to resort to a trick I havn't used for years. I have inserted a 1x1 pixel image in place of the 'junk' text.

Any better solutions are welcome :P

You need to clear the float:

<div class="clearfloats"><!-- clear the floats --></div> <!-- in place of the <br> -->

.clearfloats {
line-height: 0;
clear: both;
}

Something like that. I always use the PIE method:

#processBox {
min-width: 0;
} /* for IE 7 */

#processBox:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

* html #processBox {
height: 1%;
} /* for IE 6 */

Hope this helps…