Hello.

I've been trying to solve a problem I'm having with the alignments of some div tags. I know there are some threads about this topic but this is quite a particular case. I'll post and image to describe my situation:

http://img809.imageshack.us/img809/952/picture1tf.png

What I want is to have the text "Mega Man X7" (plus some more text) positioned right to the image.

My issue is that I use a CSS shadow-marquee trick that I found in a magazine. So, when I set anything inside the inner box to "float" (the frame class div tag in my code) it automatically sets the content outside the box (like the Mega Man X7 text which is set to float right). When set to float left, the text is positioned just below the image, but still outside everything.

So, I cannot get this right! That's why I'm looking for your help guys. My codes are below:

CSS

.shadow {
background: #666666;
border: 1px solid #666666
margin: 5px;
position: relative;
}
.frame {
text-align: center;
background:#C2C9EC;
border: 1px solid #999999;
position: relative;
padding: 5px;
left: -4px;
top: -4px;
}
/* The Frame class goes inside the shadow div tag to produce the effect shown in the image */


HTML
<div align="center">
<div class="shadow" style="width:600px;" align="center">
<div class="frame">
<div align="left" style="padding-left:10px; padding-top:10px; padding-bottom:10px; padding-right:10px;">
<img src="img/box/ps2/mmx7.jpg" name="imagen1" width="100" height="140" border="0" id="imagen1"/>
</div>
<div style="float:right; padding-left:50px; padding-top:10px; padding-bottom:10px; padding-right:10px;">
<div class="txt">
<b>Mega Man X7 Videos</b>
</div>
</div>
</div>
</div>
</div>

Thanks in advance ;)

This is one way to do it.
html:

<div align="center">
<div id="shadow">
<div id="frame">

<div align="left">
<table>
<tr>

<th><img src="mm7.jpg" name="imagen1" width="100" height="140" border="0" id="imagen1" /></th>
<th><b>Mega Man X7 Videos</b></th>
</tr>
</table>
</div>
</div>
</div>
</div>


CSS:

#shadow {
background: #666666;
border: 1px solid #666666
margin: 5px;
position: relative;
width: 600px;
}
#frame {
text-align: center;
background:#C2C9EC;
border: 1px solid #999999;
position: relative;
padding: 5px;
left: -4px;
top: -4px;
}
#imagen1 {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}

/*We use ids when it is just a one time thing. Use classes when you want to use it on more than one thing.*/


My image was in the same folder as the other two files.

(Slap on my head xD)
I did not think about using tables for this. It sure helps.

However, I'd like to know if there is a solution using only div tags.

Thanks.

Put the images in one class of paragraph <p>, float that class left, put the text in another class, float them right. Paragraphs are block elements too, so you can specify them like divs.

Following along DrDOS's line, (and to clear up some excess divs), your layout ought be more along the lines of:


<div class="shadow">
<div class="frame">
<img src="img/box/ps2/mmx7.jpg" name="imagen1" width="100" height="140" id="imagen1"/>
<p>Mega Man X7 Videos</p>
</div>
</div>



That's about all you need to get things working, once suitable styled/positioned with CSS.

Excellent, the <p> tag works great.

Thanks to all.