Hi Erik,
On Tue, 2009-09-22 at 10:21 -0500, Erik Vorhes wrote:
> On Tue, Sep 22, 2009 at 8:54 AM, bill walton <[email protected]> wrote:
> >
> > The problem is that the image on the right is not expanding to the same
> > height as the one on the left.
>
> A possible solution:
>
> HTML:
> <div id="outer">
> <div id="inner">
> ...
> </div>
> </div>
>
I would _never_ have thought to do this. Thank you very, very much! It
worked like a charm.
> CSS:
> #outer {
> background: url(right-edge.png) no-repeat bottom right;
> margin: 0;
> padding: 0;
> padding-right: [width of right-edge.png]px;
> }
I did have to add a padding-bottom:1px; to this. For a reason I may
never understand ;-) I was still getting the right-side image
displaying 1px shorter than the left.
> If you float any children of #inner, make sure to add overflow:hidden to
> #inner.
Have lots of floating children do I did this too. Thanks much for the
advance notice.
> PS This hasn't been tested in IE6, so you might need to force
> hasLayout for it to work. (Give each of those divs zoom:1 and you
> should be fine.)
Luckily, I don't have to support IE6. I haven't tested in 7 yet but it
looks like there's very little to do for 8.
Again, thank you very much!
Best regards,
Bill
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
