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!
Share Improve this question edited Sep 19, 2011 at 23:56 Joseph Marikle 78.6k18 gold badges113 silver badges130 bronze badges asked Sep 19, 2011 at 23:49 David MenardDavid Menard 2,3213 gold badges43 silver badges68 bronze badges3 Answers
Reset to default 5You 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>