[SOLVED] height inheritance

[Derleek]

Hey guys...

 

I have a image that displays next to the content of a website.  I would like this image to expand or contract depending on the height of my content div.  I am confused because setting the height of the img div to 'auto' does not work!

 

code:

HTML -

<div id='content'>
<div id='divider'></div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia sollicitudin ante. Nullam rhoncus placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>

CSS -

#divider
{
background: transparent url('../img/menu_background2.jpg') repeat-y top right;
width: 3px;
height: auto;
margin-left: -20px;
position: absolute;
}

 

I could very easily use JS to do this but i'd rather not.  Shouldn't the 'content' div's height be inherited by the divider div?

 

Thanks for any advice!

 

[jackpf]

Just a guess, but that might be because images are a certain px, so cannot resize themselves.

 

I think javascript would be the best thing for this.

[Derleek]

Its not the image i'm trying to resize the image... just the div.  The css: 'background: transparent url('../img/menu_background2.jpg') repeat-y top right;' makes the image repeat down the divider div.  But for some reason the divider div does not inherit the height of the content div, even though it is nested.

 

I'm trying to make the divider div adjust to the content divs height... sorry if this wasn't clear before.

[Dragen]

could you just remove the divider div, and have the divider image in the 'main' dive, or whatever it is dividing?

Then just add some padding-left to the div so that its contents are not displayed on top of the image:

.left{
padding-left:'WIDTH OF menu_background2.jpg HERE'px;
background:url('../img/menu_background2.jpg') 0px 0px repeat-y transparent;
}

 

<div>some content></div>
<div class="left">other content</div>

 

That way, the image will always go from top to bottom, whatever the height of the div

[TheFilmGod]

height: 100%;

 

height: auto; shrink wraps it.

[Derleek]

ugh... that makes sense....

 

change your name to css God.

 

I swear you've helped on nearly all of my css issues