What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side.

I have implemented a layout using Bootstrap's grid system with 6 columns for the thumbnail and 6 columns for the content. However, I am now faced with the challenge of ensuring that the content automatically fills the remaining space below the image. Any suggestions on how I can achieve this effect using CSS or Bootstrap?

htmlcsswordpressbootstrap-4text-alignment

Answer №1

If you're working with Bootstrap, the current setup makes it impossible to achieve what you're looking for.

One workaround is to set it to 2 columns at 50%, with the image in one column and all text/content in the other, which will display similarly to your desired layout.

You may need to use a col or col-12 and place both the image and text in the same area.

Think of it like how old school WordPress content editors handle image alignment.

For example, here's some code you can reference to make the text wrap correctly. You can check out the provided jsfiddle link for a live demo:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/150">
      Text goes here
    </div>
  </div>
</div>

Check out this working example on JsFiddle

Answer №2

Here is an example of how to structure your HTML code:

Create a Container:

<div class="container">
  <div class="row">
    <div class="col">
      <img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">
      <h1>
          My Text Heading
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum ultrices mauris eu eleifend...

...ante sed tempus ultrices. Maecenas eget suscipit lectus. Cras sodales, est vel finibus venenatis...
      </p>
    </div>

  </div;
</div>

Check out the Fiddle for interactive examples:

https://jsfiddle.net/guruling/xeyLk1qb/1/

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

How can I use the same popup button to open a different link in a new tab?

I have a situation where I am using a button to trigger an ajax html popup. What I want is for the same button, when clicked, to open another page in a new tab. Any assistance would be greatly appreciated. Below is the HTML code I am currently using: < ...

javascripthtmlajaxbuttonpopup

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

phpcsscodeigniter

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

Having Troubles with PHP File Upload Form

Executing index.php initiates the user input of metadata and files: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"/> <meta http-equiv="X-UA-Compati ...

phphtmlfile-uploaduploadfilesize

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

htmlcssangularng-bootstrap

What is the best way to loop through ng-repeat with key-value pairs in order to display each

I need to loop through and show the data stored in "detailsController". <div ng-controller="detailsController"> <div ng-repeat="data in details" id="{{data.Id}}"> {{data.Name}} </div> </div> ...

javascripthtml

Styling a clock with rounded corners using CSS: Border-radius trick

Attempting to craft a analog 12-hour clock using basic CSS properties, I initiated the process by forming a square div of the size 500px. Applying a border-radius of 250px resulted in an aesthetically pleasing circle design. Following this step, I incorpor ...

htmlgeometrycss

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs

Displaying a 404 error page in Vue Router 4 when users refresh the page

I'm currently developing a headless WordPress theme using Vue 3. After implementing vue router, everything seems to work fine when the page is initially loaded. However, I've encountered an issue where if the user changes the route and then refr ...

wordpressvue.jsvue-routerheadless

What is the mechanism through which a flexbox enlarges to accommodate its overflowing child elements?

I am working with a flexbox layout. Here is the HTML code structure: <div class="grid"> <div class="row"> <div class="column">Content</div> <div class="column">Content2</div> <div class="column">Con ...

htmlcssoverflowflexbox

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

htmlcss

5 Ways to Incorporate Font Awesome Icons into CSS Pseudo Elements

I'm attempting to incorporate FontAwesome icons into CSS pseudo elements. When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes whe ...

cssfont-awesomepseudo-element

What is the correct way to show a JavaScript response on the screen?

Here is the JavaScript code I used to call the server API: <script type='text/javascript'> call_juvlon_api(apikey, 'getAvailableCredits', '', function(response) { document.getElementById('show').innerHT ...

javascripthtmljson

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

javacssspringprimefaces

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

Having trouble transferring JSON data to HTML using Angular.JS for a programming course. The author doesn't seem to have this issue, can anyone provide some assistance? I've correctly linked Angular and added the app, but it's not working a ...

javascripthtmlangularjsjson

I am curious if there is a method to vertically center text without being affected by the font-family or font-size

Searching for a font-independent method to center text within a div. My div has a button-style fixed height, and I need the text (one line only) to be centered vertically within it. The issue arises when changing the font-family, as some fonts do not ali ...

cssvertical-alignmentwebfonts

What is the best way to hide certain buttons from specific users in Angular using the If condition?

I am facing an issue with my array of blocked_users, where I need to hide certain buttons if a user is in the blocked_users list. Below is the code snippet from my angualr.component.html: <div *ngIf="!(userId in event.blocked_users)"> ...

htmlangular

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js