Arranging text in a grid pattern surrounding an image

I'm new to CSS and experimenting with grids, but I'm struggling to create a grid with two rows and two columns. Here's what I'm looking for:

Upper left cell: button and TEXT Upper right cell: picture Lower left cell: TEXT continues Lower right cell: TEXT continues

.row {
display: grid;
  grid-template-columns: 0.1fr 0.35fr 0.55fr;

  grid-auto-flow: row;
  grid-template-rows: auto;
  
  .button {
  text-align: center;
}

.text {
  grid-column-start: 1;
  grid-column: span 2 / span 2;
  grid-row-start: 2;
  
}

.img {
 float: right;
}
<div class="row">
     <div class="upper-right-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
      <div class="upper-right-cell"><img src="https://www.w3schools.com/Css/pineapple.jpg">
       
      </div>

The text should start just below the BUTTON, then continue under the image into the second column.

I can't see the forest for the trees.

htmlcss

Answer №1

I successfully met your objective without relying on a grid layout. If you are open to eliminating the grid, you can utilize this code snippet. However, if grid usage is essential, feel free to disregard my solution.

<!DOCTYPE html>
<html>
<head>
    <title>
        Wrapping an Image with the text
    </title>
    <style>
        /* This div design part is
            used as an Image */
        .upper-right-cell {
            width: 400px;
            height: 100px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="upper-right-cell">
        <img width="400" height="100" src="https://www.w3schools.com/Css/pineapple.jpg">
    </div>
    <div class="upper-left-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
</body>
</html>

Reference : https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/

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

Ways to utilize jquery script within a react component

<script> $(document).ready(function() { var source; var destination; var fn = function(event, ui) { toDrop = $(ui.draggable).clone(); if ($("#droppable").find("li[uniqueIdentity=" ...

jqueryhtmlreactjsdrag-and-dropdraggable

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Applying the variables as elements within a foreach iteration

I'm currently developing a learning management system and encountering an issue with my code. foreach($datas as $data){ ?> <div style="background-color: #3B4FDF; border-radius: 3%; width: 30%; height: 220px; margin-right: 5%; cursor: poi ...

javascriptphphtmlmysql

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

Replicate the Bootstrap flexbox grid system with customized media breakpoints

I'm trying to replicate the flexbox grid system found in Bootstrap. Everything is working smoothly except for the media query aspect. The columns are stacking horizontally as intended, but when a specific breakpoint is reached, I aim to have the divs ...

csssassbootstrap-4

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

htmlangulartypescriptvideogetusermedia

The CSS property overflow:hidden or overflow:scroll is not functioning as expected when applied to a

On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...

javascriptjqueryhtmlcss

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations

What is the best way to showcase a variable from a switch statement on my ASP.NET web page?

Looking to format the month from a datetime object as text in this style: 01 Dec 2011 A switch statement was set up to determine the month and assign it to a variable for display on index.aspx. However, the code doesn't seem to be functioning as e ...

asp.nethtmlasp.net-mvc-3switch-statement

The data-toggle function is not functioning properly with the code provided

Could someone shed some light on why my tabs and navigation bar dropdown button are not functioning properly? <div class="col-12"> <h2>Corporate Leadership</h2> <ul class = "nav nav-tabs&q ...

htmlcssbootstrap-4tabsreact-bootstrap

How to change the file name of an HTML page in a website template?

After downloading a free dashboard website template from the internet, I've been trying to incorporate it into my own website. My main focus now is on creating a navbar that opens the relevant page upon clicking. To do this, I duplicated the html fi ...

htmlcsstemplatesbootstrap-5dashboard

What happens when a disabled option is chosen in a select element?

My approach to include a default disabled option "Select a town" in a select dropdown using HTML is as follows: <select name="town"> <option selected disabled value="xx">-- Select a town --</option> <option value="1">Paris ...

javascripthtmljqueryhtml-select

Form-check radio buttons within the form-check-inline class of Bootstrap 4.1.1

I am attempting to showcase a radio button as an inline option. According to the Bootstrap 4.1.1 documentation, the example code is: <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOption ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing jQuery to pinpoint elements with personalized data attributes

I am struggling with a few elements that look like this <p data-lang-bg="Bulgarian" data-lang-en="English" >Text</p> <p data-lang-bg="Other bulgarian text" data-lang-en="Other english text" >Text 2</p> How can I write a jQuery sel ...

jqueryhtmlcss-selectorsjquery-datacustom-data-attribute

Fade out a div with jQuery when hovered over, while preventing the links within the div

I've been experimenting with using jQuery to create a fade effect on a div when hovered over. However, I'm encountering an issue where the anchor link within the div cannot be selected once it is shown. $('#show').hover(function() { ...

jquerycss

Can PHP retrieve data when the form submit function is overridden with AJAX?

I have customized the .submit function of a form on this webpage. It is being loaded inside the #mainContent in an "index.php" and I want the Submit button to only replace this #mainContent. My goal is to retrieve data from this form and send it to a .php ...

javascriptphphtmlajaxjquery-mobile

Incorporate tab functionality within an editable div element

I am having trouble implementing tab functionality in an editable div, even though it works fine when using an html textarea instead. Below is the code for the textarea that functions correctly: <textarea id="txt" style="height: 125px; overflow-y: scrol ...

javascriptjqueryhtmltextarea

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap