Jump to content

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


niche
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...