Why is it that text doesn't function properly next to certain images?

Question

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an 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>

Despite adjusting the size of the image, it consistently appears above the text... why is that?

In the end, I decided to utilize the "initializr" template (found on Google), as it also ensures responsiveness which was necessary for my project! Thank you all, regardless!

html css image positioning

Answer 1

Answer №1

To optimize the image display, consider incorporating the position property.

For example:

image{position:fixed , absolute , relative; top:50%; left:50%;}

Another method to try would be:

<div>
<image></image>
<p></p>
</div>

Answer 2

To optimize the image display, consider incorporating the position property.

For example:

image{position:fixed , absolute , relative; top:50%; left:50%;}

Another method to try would be:

<div>
<image></image>
<p></p>
</div>

Answer 3

Answer №2

After a request from a commenter to work with your code only, I have come up with a solution that aligns the 2 divs next to each other using your code.

<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 I have formatted the code below for an improved version based on your request. Feel free to consider these alternatives for your solution.

<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 4

After a request from a commenter to work with your code only, I have come up with a solution that aligns the 2 divs next to each other using your code.

<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 I have formatted the code below for an improved version based on your request. Feel free to consider these alternatives for your solution.

<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 5

Answer №3

The positioning of the text is affected by the image, causing it to be pushed below due to the total width of both container divs exceeding the page width, resulting in the second div appearing below the first:

<div style="display:inline-block;vertical-align:bottom;width:200px;">

http://jsfiddle.net/3Luby/

Answer 6

The positioning of the text is affected by the image, causing it to be pushed below due to the total width of both container divs exceeding the page width, resulting in the second div appearing below the first:

<div style="display:inline-block;vertical-align:bottom;width:200px;">

http://jsfiddle.net/3Luby/

Why is it that text doesn't function properly next to certain images?

Answer №1

Answer №2

Answer №3

Similar questions

In Stripe.js, the background color and height of the credit card input cannot be customized

Difference among rows

Tips for generating an ordered list that begins with 01

Unique content on a web page when it is loaded with HTML

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Display the element following a specific component while looping through an array in Vue.js

Breaking the border between columns in CSS columns

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

The MUI makeStyles() class has been implemented, yet the styles are not being displayed when using classList.add('class-name')

What is the best way to show a message within a specific HTML division with JavaScript?

Using a twig loop to display just a single table cell

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

How can I upload a folder with subfolders and keep the structure intact?

Is your browser tab failing to display the complete URL?

The HTML code displays the changes in output after resizing the screen

What is the best way to customize the endIcon of a styled-component button?

Rails assets folder is not directed to the specified directory in the layout file

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

"Clicking on the hamburger menu causes the webpage to reset its scroll

Can React JSX and non-JSX components be combined in a single project?