Tips on positioning the text next to the image

You have created an HTML page with an article, but the spacing between the image and text is missing in the displayed image.

I need the text to be positioned beside the image to give it a unique shape.

Here is the HTML code:

/* Start content Article .. */

.contentmqal {
    width: 80%;
    float: left;
}

article {
    margin: 15px;
    background: #f7e9e3;
    border-radius: 8px;
    padding: 8px;
}

article section {
    float: right;
    clear: left
}

article section p {
    font-family: 'Source Sans Pro', sans-serif;
}
            <div class="contentmqal">
            <!-- Start Content Article -->
            <article>
                <section>
                    <h3>One Year ago: Durian Fruit</h3>
                    <p>The durian is a tropical fruit. It is from Malaysia. People know it for its sharp smell. Some people say... <span>read more</span></p>
                </section>
                <img src="image/a1.jpg" alt="Durain Fruit" title="One Year ago: Durian Fruit" width="238px" />
            </article>
            </div>
<!-- End Content Artcle -->

http://prntscr.com/lo22wh

I need the text to be in a red box.

htmlcss

Answer №1

Utilize the flex property for the container.

Give this a try. You can also use align-items:center if you want the items to be centered.

In addition, apply order:2 to the section so that it will float to the right side.

Test this out.

/* Start content Article .. */

.contentmqal {
    width: 80%;
    float: left;
}

article {
    margin: 15px;
    background: #f7e9e3;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
}

article section {
    float: right;
    clear: left;
    order: 2;
}

article section p {
    font-family: 'Source Sans Pro', sans-serif;
}
            <div class="contentmqal">
            <!-- Start Content Article -->
            <article>
                <section>
                    <h3>One Year ago: Durian Fruit</h3>
                    <p>The durian is a tropical fruit. It is from Malaysia. People know it for its sharp smell. Some people say... <span>read more</span></p>
                </section>
<img src="image/a1.jpg" alt="Durian Fruit" title="One Year ago: Durian Fruit" width="238px" />
            </article>
            </div>
<!-- End Content Artcle -->

Answer №2

Implement the use of display:flex for the article element

.contentmqal {
    width: 80%;
    float: left;
}

article {
    display:flex;
    margin: 15px;
    background: #f7e9e3;
    border-radius: 8px;
    padding: 8px;
}

article section {
    float: right;
    clear: left
}

article section p {
    font-family: 'Source Sans Pro', sans-serif;
}
<div class="contentmqal">
 <article>
 <img src="image/a1.jpg" alt="Durian Fruit" title="One Year ago: Durian Fruit" width="238px" />
 <section>
  <h3>One Year ago: Durian Fruit</h3>
  <p>The durian is a tropical fruit. It is from Malaysia. People know it for its sharp smell. Some people say... <span>read more</span></p>
</section>

 </article>
</div>

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

What are the steps to create a downpour in every location on Earth

Is there a way to create a continuous raining effect for my weather app using CSS only? I have achieved a satisfactory look, but the rain effects seem to only cover random chunks of the screen rather than the entire screen. How can I make it cover the enti ...

csscss-animations

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

cssjquery-ui

CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve thi ...

htmlcss

Launching a program through a web browser - a step-by-step guide

I am looking to create a specific sequence of events: A web browser opens, and a user logs in (the exact action is not crucial) The user is then redirected to a new page where another program should automatically open This process is similar to what happ ...

javascripthtmlweb

What are the methods for accessing data from a local Json file on an html page without using a server?

Looking to access a local Json file from an HTML page, but encountering challenges in reading the file on Chrome and IE. Is there a method to achieve this without relying on a web server? ...

htmlangularjsjson

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

Strategies for avoiding unused style tags in React components

Expanding beyond React, I'm unsure if React itself is the culprit of this issue. In a React environment with TypeScript, I utilize CSS imports in component files to have specific stylesheets for each component. I assumed these styles would only be ad ...

javascriptcssreactjstypescript

Struggling to access a .html page using Selenium?

Currently utilizing behat/mink, selenium 2 driver, and chrome driver in php to navigate a unique issue. Attempting to access a dummy HTML page proving challenging. Our team is implementing a chatbot onto our main site's landing page as an iframe posit ...

phphtmlseleniumbehatmink

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

cssreactjsmaterial-ui

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

Introducing a novel class designed to leverage the attributes of another class

Is there a way to use the @extend feature in CSS to inherit properties from one class to another? Imagine having two CSS files loading on a page in this order: <link rel="stylesheet" href="/css/one.css" media="screen"> <link rel="stylesheet" href ...

css

Implementing the map function in ReactJS to showcase data on the user interface

I seem to be facing an issue while attempting to utilize an array of data to display a <ul> element. Despite the console.log's working correctly in the code provided below, the list items fail to show up. <ul className="comments"&g ...

javascripthtmlreactjs

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

javascriptjqueryhtmlangularjscss

Understanding the response format in jQuery and AJAX

Can anyone advise on the optimal data format for communication with JavaScript? Should I stick to JSON or use plain HTML instead? Are there any alternatives worth considering? ...

jqueryhtmlajaxjson

Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable? You can view the source at http://jsfiddle.net/9dWcZ/ HTML: <div class="header"> this is header </div> <div class="content ...

cssdomlayout

Please provide the text enclosed within the h1 tags

Is there a way to extract the content between <h2> </h2> tags in PHP or jQuery from each page and use it as the title of the pages to ensure uniqueness? Example: <section class="sub_header"> <h2>Contact</h2> < ...

phpjqueryhtmltagstitle

Using embedded js files in jQuery's .load() function does not function properly

In the index.html file, I have the code snippet below: <div id="page-insert"></div> function openPage(pageid) { $('#page-insert').load(pageid); } openPage('testpage.html'); Additionally, there are script files embedde ...

javascriptjqueryhtmlajax

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

My goal is to capture a "snapshot" of a webpage while maintaining its interactive functionality, allowing all Javascript states to be saved and restored. An example scenario where this would be beneficial is when a webpage contains script that utilizes glo ...

javascripthtmlgoogle-chrome-extensionfirefox-addon

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

Achieve a dynamic effect by filling a path with an image and stretching it within the Canvas element

I am looking to fill a path in the shape of a circle or custom design with an image, but I want the image to stretch so that it fits within the boundaries of the closed path. Is it possible to accomplish this using HTML5 and the Canvas object? Below is th ...

htmlcanvashtml5-canvas