match image height to height of another div SOLVED with thanks in final post

[niche]

How do I get the image in the right div to a height that matches the height of the div to its right based on this link? http://www.lincolnsr...aded_120620.php

Edited June 22, 2012 by niche

[boen_robot]

If you can sacrifice IE6 and IE7, you can simply set the two divs to display:table-cell, set the body to display:table;, and remove the floats.

[dsonesuk]

create outer container

<div id="wrapper">  <!-- all other html in here --> </div>

that will match height of content then you have three options, 1) Make the image the width you require, or use css3 (won't work in older ie browsers less than ie9) background-size: and repeat it down left (I think you meant) side with background: url(my_image) repeat-y left top;

#wrapper {width:960px; min-height: 400px; margin: 0 auto; background: url(my_image) repeat-y left top;}

2) img tag that will distort as it streches to match content

<img src="my_image.jpg" id="left_background" />

#wrapper {width:960px; min-height: 400px; position:relative; margin: 0 auto;}#left_background {position:absolute; width:200px; left:0; top:0; height:100%;}

3) create left side container and repeat image within that

<div id="wrapper"><div id="left_bg"></div><div id="left"></div><!-- all other html in here --></div>

#wrapper {width:960px; min-height: 400px; position:relative; margin: 0 auto;}#left_bg {width:200px; position:absolute; left:0; top:0; height:100%; background: url(my_image.jpg) repeat-y left top;}

#left_bg will sit behind #left to give the impression it extends to the bottom

[niche]

I'm working with the third option. I added a float:left; to #wrapper. http://www.lincolnsrealdeals.com/test_120621.php The background image is covering half the width of the red/blue divs and I can't separate them. How do I do that? Also, I'm unclear what you want me to do with the #left.

Edited June 21, 2012 by niche

[dsonesuk]

A position absolute element is invisible to other elements, if you are using it for a background for a left side panel, the left side panel would be used to define a area that other elements can see and position themselves relative to.

[niche]

I thought changing #left_bg from position:absolute; to float:left; would help me, but it didn't . Also, I'm unclear about how to use #left even though you've explained it twice. I could give the red/blue divs margin: 0px 0px 0px 200px;, but that's not what I want to learn. Please be show me more if possible.

Edited June 22, 2012 by niche

[dsonesuk]

position absolute element occupies no space, so other elements will occupy this vacant space overlapping this position absolute element. UNLESS, you fill this unoccupied space with a element of equal width, OR give the other elements a margin left that is again!, equal to width of this element so it will not be overlapped.

[niche]

OK. So, adding 0px 0px 0px 200px; red/blue divs accomplishes the same goal. I would've of never thought to use position that way. Why did you choose position instead of float? Could it have been done with float (I wasn't able to -- hense this topic)?

[dsonesuk]

using position you can define height: 100%; and it will match the height of the outer wrapper container, which will/should be the height of total height of elements within it, using float won't give you this, float on position: absolute; element won't work, margins yes!

[niche]

Thanks again for another great topic dsonesuk and Boen Robot. Your posts are patient and always complete. Thanks again.