Stylesheets - Background image doesn't fill a float:left column

Author

Background image doesn't fill a float:left column

2005-10-31, 6:44 pm

Hello! I am trying to lay out a left navigation column with a
background image, where the left nav column runs the entire scrolled
height/length of the page. The float:left column layout works fine, but
the background image doesn't continue downward in this column below the
links. I tried this in FireFox 1.0.7 and IE6, but this image stops
where the last link stops. I want the background all the way to the bottom.

How can I force the background image to repeat all the way down the left
column even if there are no links or text displayed in this area?
Thanks in advance for any input on this issue.

RJ

My css ---->

#left-navigation-column {
float:left;
background-image:url("background.gif");
background-repeat: repeat-y;
width:150px;
}

Els

2005-10-31, 6:44 pm

RJ wrote:

> Hello! I am trying to lay out a left navigation column with a
> background image, where the left nav column runs the entire scrolled
> height/length of the page. The float:left column layout works fine, but
> the background image doesn't continue downward in this column below the
> links. I tried this in FireFox 1.0.7 and IE6, but this image stops
> where the last link stops.

That's because that's how high that floated div is. It will only
extend to the height of its content. (set a border to see it)

> I want the background all the way to the bottom.
>
> How can I force the background image to repeat all the way down the left
> column even if there are no links or text displayed in this area?

By faking it.
Set the background (an image of the same width as the column) to the
container that holds the floated div and the content area. Make sure
you have the background of the floated div set to transparent.

> Thanks in advance for any input on this issue.

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -