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!

htmlcssimagepositioning

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

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 №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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

javascriptcssreactjsmaterial-uimakestyles

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

My question is regarding changing the content of a div using the `html()` method in JavaScript. I am currently working on implementing a "cancel" button and would like to revert the content back to its original value without having to completely reset it w ...

javascriptjqueryhtml

What is the best method for adding a background image to a jumbotron in my Django project?

I have been struggling with this issue for some time now. Currently, I am working on a Django project and I need to add an image as the background in the jumbotron section. home.html {% extends 'blog/base.html' %} {% load static %} {% bl ...

pythonhtmlcssdjangotwitter-bootstrap

Customizing the appearance of a radio button within a form

I need assistance with styling a form that contains a radio button. I'm looking to customize the appearance of the radio button by adding a background image and also changing the default view of the check image. Additionally, I want the form to be cen ...

csshtmlformsradio-button

Troubleshooting Problem with Web Forms and Bootstrap Form Design

Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page. The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Mai ...

cssasp.netformswebforms

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Angular bindings expression involving HTML elements

Can HTML elements be inserted in an Angular expression? Let's explore a few examples. For instance, we might want to achieve something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? ...

htmlangularjs

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

jqueryhtmlcsssass

Is there a way to make images appear on the screen only when they come into view on

While exploring the internet, I came across something quite intriguing on a website: As you scroll down the page, images only load when they come into view in the browser window. This is a feature I have never seen before and I am curious if anyone else h ...

javascriptjqueryajaximage

I am experiencing difficulty loading my image in HTML5

Despite using the correct syntax and having my image file in the same folder as my HTML document, I am facing an issue where the programmed image does not appear on the page when I load the document. What could be causing this? In this case, both my HTML ...

htmlimage

The loading time for the Docker index HTML file page is unacceptably slow

Sample Dockerfile: FROM ubuntu:22.04 RUN apt-get update RUN apt-get install -y nginx COPY -r dist/ /var/www/html/ CMD service nginx start && tail -F /var/log/nginx/error.log After that, run the following commands: docker build -t website . docker ...

htmlangulardockernginxstatic-files

Issues with retrieving the subsequent anchor element using Jquery Slider

(Apologies for the lengthy post. I like to provide detailed explanations.) Just starting out with Jquery, trying my hand at creating a custom image slider from scratch. Got the slider working with fade effects using this code: Javascript: $(document).re ...

javascriptjquerycssslideranchor

I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public

Within the template of my vue component, I am utilizing the following code: <iframe width="1000vw" height="600vh" src="../../public/myHtmlFile.html"></iframe> Unfortunately, the file specified in the src attribut ...

javascripthtmlvue.jsiframe

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

javascriptjqueryhtml

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position