Question

I’m trying to fade out text so rather than a harsh clip for overflow the text fades away at the edge (static; not an animated effect). I’m using an image on top of the background to cause the fade (I may be way off on this approach; let me know…)

Everything works great, the 1px high image scales in width/height perfectly… to the outermost <div>. I’d like it only to scale to fit the height of TOP-DIV-Text but I can’t figure out how.

<div style="font-weight:bold; height: 100%; width: 200px; white-space: nowrap; overflow:hidden; background-color: #7E7EFF;" id="yomama">
<div>
  <img height="100%" style="position:relative; float:right;" width="50%" src="http://s12.postimage.org/o4bptewwp/fadeout.png" >
  <span style="color=green; font-size: 60px;">
  <u>
    TOP-DIV-Text
  </u>
  </span>
</div>
<div valign="top">
    <span style="color:red; font-size: 30px; white-space: nowrap;">
    <div>
    Middle-Div is a chatty guy
    <br>
    </div>
    <div style="color:blue">
    Bottom div has some more text
    </div>
    </span>
</div>
</div>

http://jsfiddle.net/ZEDFV/1/

Answer 1

The result you are achieving is the expected behavior for a floated image. It will unfortunately overflow its container.

If you want the image to stay within the top div then you will need to position the image absolutely, please take a look at my updated example : http://jsfiddle.net/ZEDFV/2/

I updated the CSS for your image to be as follows:

.fader {
    position:absolute; 
    top:0;
    right:0;
    height:100%;
    width:50%;

}

And I added the following CSS to the div that is wrapping the image:

.wrapper {
      position:relative; 
}

I added position:relative to the wrapping div, because we need to position the image absolutely, but relative to the bounds of the div it is enclosed in.