I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them. To do this, I have the following:

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

This is all great except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements). I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.

Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a plicated one at that, since the boxes will be animated).

Any ideas? Thanks!

I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them. To do this, I have the following:

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

This is all great except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements). I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.

Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a plicated one at that, since the boxes will be animated).

Any ideas? Thanks!

• javascript
• html
• css
• tags
• z-index

3 Answers 3

You should use position:absolute rather than position:relative in order to take the element out of flow. You will need to adjust the left and top attributes, however.

http://jsfiddle/3fJcR/1/

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
        <div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

You can have position:absolute for your wrapping div and position:absolute for inner overlay too. Then the inner absolute is relative to outer absolute positioned element not the body.

Look at this example to see what I'm saying:

http://jsfiddle/mohsen/TbkjK/7/

For writing text over image you put image in background style and alt text like this-

<img scr="" alt="text"/>

<style>
.img{background-image:url('IMAGE_URL'); }
</style>