Fixed Text allign with responsive image

Question

Im trying to get a column of text to align to a responsive image but I need the text to be fixed so that when you scroll, you can still see the text.I tried having the text relative to the image but It wouldn't stay fixed when scrolling.

Here is my code:

<div id="imgcontainer">
<div id="img2">
    <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
    <div id="img3">
        <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
        <div id="img4">
            <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
            <div id="description" style="width:25%">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </div>
</div>

And my css:

#imgcontainer {
margin-top: 96px;
margin-left: 314px;
position: absolute;
z-index:1;
}

#img2 {
margin-top: 0px;
margin-left: 0px;
position: static;
z-index:1;

}

#img3 {
margin-top: 10px;
margin-left: 0px;
position: static;
z-index:1;

}

#img4 {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
position: static;
z-index:1;

}

 #description {
padding-right:50px
float: right;
position: fixed;
 top: 100px;
Left: 900px;

}

Here is a clearer idea of what I have (I used a plugin to make the images responsive):

http://jsfiddle.net/rLzc8/

Any help is greatly appreciated. Thank you so much in advanced!

Can you make some picture to make clear where do you whant to place your text? — Oleg, Dec 06 '13 at 22:43
HI Oleg, I just want the text on the aligned to the right border of the image. Does that make sense? — GabrielaM, Dec 06 '13 at 22:44
So you whant to fix your text vertically, but not horizontally? — Oleg, Dec 06 '13 at 22:47
Correct! I want it to move position as the edge of the image moves, but remain fixed vertically for the scroll. — GabrielaM, Dec 06 '13 at 22:49
Maybe this will help you http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally — Oleg, Dec 06 '13 at 22:59
Unfortunately, that works when the object is moving but not when its resizing like my images. The text is fixed to scroll but it doesn't move when the image resizes. — GabrielaM, Dec 06 '13 at 23:12
In the fiddle, you have a missing semicolon between `padding-right:50px` and `float: right;`. Not sure if that solves anything though. — Mr Lister, Dec 07 '13 at 15:24

Fixed Text allign with responsive image

0 Answers0