How do I keep text over image when page is zoomed?

[wkenny]

I have the following:

HTML

	<div class="content">
    <div class="textbg">
     <img src="bg400x400.jpg" width="600px" height="990px">
        <div class="textinbox">
  <!-- text goes here -->

and the CSS

.content
{
float: left;
width: 60%;
padding-left: 0.5%;   
}
.textbg {
position: relative; 
width: 100%;
padding-left:10px;
}
.textinbox {
position: absolute; 
top: 20px; 
left: 20; 
width: 90%;
padding-left:30px; 
padding-top:10px;
}

If I zoom in or out, the text overflows the image container. How can I force the text to always stay inside the image div?

[itivae]

I would say your problem involves your use of absolute positioning in

.textinbox

. Do you have a link to the page? Also are you sure that the

</div>

tags are properly nested?

[wkenny]

Page is at:
proweb4u.com/test.shtml

If I don't use position absolute, the text displays below the image

[itivae]

Try this

change your .textbg { width:600px;}
then adjust your padding to center in your .textinbox

Looks good to me in Firefox and Opera.

[wkenny]

Brilliant - that does the trick. Thanks a bunch.

[Butterfly]

I'm glad it works. You could also try using z-index properties and set the text a higher z-index than the image.

Example:

text { z-index: 100; }
image { z-index: 99; }