Concluding remarks can be found at the end of the article

Is there a way to keep text aligned next to an image without it dropping down and disrupting the layout of the article?

* {
            margin: 0;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 10px 15px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
        }
        .name{
            display: inline-block;
        }
<body>
<article>
<img src="https://sn56.scholastic.com/content/dam/classroom-magazines/sn56/issues/2018-19/040819/picture-this-nature-s-night-light/SN56_040819_Aurora-Hero-Mobile.jpg" width="375" height="375">
        <div class="name">text</div>
</article>
</body

Efforts were made to set the display to inline but unfortunately, that solution did not produce the intended outcome.

htmlcss

Answer №1

Try incorporating CSS and utilizing the vertical align property with a top value, as it could potentially be beneficial in this situation.

Answer №2

To ensure the text is positioned at the top, you can use the "vertical-align: top;" property with display: inline-block;

* {
            margin: 0;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 10px 15px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
            vertical-align: top;
        }
        .name{
            display: inline-block;
            vertical-align: top;
        }
<body>
<article>
<img src="https://sn56.scholastic.com/content/dam/classroom-magazines/sn56/issues/2018-19/040819/picture-this-nature-s-night-light/SN56_040819_Aurora-Hero-Mobile.jpg" width="375" height="375">
        <div class="name">text</div>
</article>
</body

Answer №3

Could you kindly modify the layout to appear like this:

<article>
<div class="name">text</div><img src="https://sn56.scholastic.com/content/dam/classroom-magazines/sn56/issues/2018-19/040819/picture-this-nature-s-night-light/SN56_040819_Aurora-Hero-Mobile.jpg" width="375" height="375">
</article>

Please include the following CSS code:

.name {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}

Note: Remember to use vertical-align: top; if you are using display: inline-block;

Answer №4

You have the ability to define

article{
        display: flex;
}


* {
            margin: 0;
            font-family: Iransans;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 10px 15px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
        }
        .name{
            display: inline-block;
        }
        
        article{
        display: flex;
        }
<body>
<article>
<img src="https://sn56.scholastic.com/content/dam/classroom-magazines/sn56/issues/2018-19/040819/picture-this-nature-s-night-light/SN56_040819_Aurora-Hero-Mobile.jpg" width="375" height="375">
        <div class="name">text</div>
</article>
</body

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

Updating the chosen value in an HTML select menu dynamically using PHP

I understand that there are existing examples discussing how to dynamically set the selected tag in an HTML option tag. However, I am encountering a complex issue involving break statements and quotations while trying to accomplish this. In my code: whil ...

phphtml

Ways to add gaps between flexbox items within a single row?

I have a coding dilemma where I am trying to display two items in the same row with a 12px gap between them, but my current method is not working as desired. I want there to be space between the A's and B's without resorting to traditional techni ...

htmlcssflexbox

Numerous DIVs with floating elements and border styling

Trying to align two divs with one floating to the left and with a width of 80%, while the other is floated to the left with 20% width, is causing some issues. I want to add a border on the right side of the first div and apply a box-shadow of 5px since eac ...

htmlcss-floatbordercss

Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container? Given the HTML provided, how can I achieve this layout using flexbox? I attempted to accomplish thi ...

htmlcssflexbox

Steps for accessing a particular item with *ngfor in Angular 2

I'm struggling to figure out why both elements of my array are displaying simultaneously in my browser instead of separately. Take a look at this screenshot to see what I mean: https://i.stack.imgur.com/0EKSn.png Is there a method to specifically ac ...

htmlarraysangularngfor

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

The webview is failing to display the dropdown menu

Everything seems to be working fine with the 3 dropdown menus on this website, as they appear on top of the images below them. However, when I convert the site into an Android app using Webview, the menus end up going under the images instead of on top. ...

androidcss

Using multiple background images in CSS on mobile devices

I decided to experiment with creating a grid pattern using css background-images in this way: .grid { width:720px; height:720px; background-color: #333333; background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px), ...

ioscssbackground-image

What could be causing my textarea-filling function to only be successful on the initial attempt?

Programming: function updateText() { $("body").on("click", ".update_text", function(event) { $(this).closest("form").find("textarea").text("updated text"); event.preventDefault(); }); } $(document).ready(function() { updateText(); }); H ...

javascriptjqueryhtml

Expand the video comparison slider to occupy the entire width and height

I am striving to develop a video comparison slider that fills the height and width of the viewport, inspired by the techniques discussed in this informative article: Article Despite my efforts, I have not been successful in achieving this effect so far a ...

javascriptjquerycsshtml

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Currently, I'm working on a JavaScript code where clicking assigns the function getImage the source of an image to be displayed later on the page. The issue I'm facing revolves around dealing with quotation marks. <img src="bill.jpg" class=" ...

javascripthtml

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

cssreactjsnext.jsrollup

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

javascripthtmlcssonclick

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Modifying the Placeholder Color in a Material UI Autocomplete: Tips and Tricks

In my team, we are working on two projects that both utilize an internal library with a header containing a search box. In one project, the placeholder text "Search" displays normally. https://i.stack.imgur.com/lhL5V.png However, in the second project wh ...

htmlcssreactjsmaterial-ui