Text besides Image doesnt work for specific image. Why? - html

Question

i use the following code to put text beside image:
<div style="display:inline-block;vertical-align:bottom">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p>
</div>
<div style="display:inline-block;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
However, even if i change the size of my image, it is always above the text... why?
Finally i used the template "initializr" (see google), because it makes all responsive too, which i needed! thank you all anyway!

Answer 1

you might try adding the position property to the image
so, in this case,
image{position:fixed , absolute , relative; top:50%; left:50%;}
or this may work as well:
<div>
<image></image>
<p></p>
</div>

Answer 2

A commenter asked that I work with your code only. So, here's a solution using your code, to make the 2 divs sit next to each other.
<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>
<div style="float: right; width: 49%;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
EDITED
Below I've posted code that in my mind is better formatted for your solution. Just wanted to offer up some alternatives.
<style type="text/css">
.left {
float: left;
width: 50%;
height: 50%;
}
.left img {
width: 100%;
height: 100%;
}
.right {
float: right;
}
.movida strong {
color: #d54646;
}
.common strong {
color: #2089a4;
}
.text strong {
display: block;
font-weight: bold;
}
</style>
<div class="left">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
<p class="text">
<div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
<div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
<div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
<div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
</p>
</div>

Answer 3

The text is pushed below the image because the combined width of the two container divs is wider than the page, so it pushes the second div below the first one:
<div style="display:inline-block;vertical-align:bottom;width:200px;">
http://jsfiddle.net/3Luby/