Tips for filling in the empty space next to an image with a negative left margin using text

Our goal is to create a layout where an image overflows from its container, leaving space for text to fill in the gap created by the offset image on the left side.

https://i.sstatic.net/2dvLa.jpg

Currently, our structure looks like this:

<div class="container">
  <div class="row">
    <div class="col">
       Some paragraph
    </div>

    <div class="row">
      <div class="col-5 body-img-col">
        <div class="body-img-wrap">
            <img src="images/some-image.jpg" alt="" />
        </div>
      </div>

      <div class="col-7">
        Some paragraph
      </div>
    </div>

    <div class="col">
       Some paragraph
    </div>
  </div>
</div>

The body-img-wrap img is currently set to margin-left: -100px;. However, there is a gap due to the image overflow, and the text does not fill in the space since it is not in the same column. Our goal is to have the text fill in the gap created by the image overflow.

How can we achieve this specific layout?

csstwitter-bootstraplayoutbootstrap-4

Answer №1

Below is the solution I came up with:

I separated the image and text into two sections, then set the width of the text section to match the width of the image using the following CSS:

 width: calc(100% - 200px);


.left-sec {
  width: 200px;
  height: auto;
}

.right-sec {
  width: calc(100% - 200px);
  padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="container">
    <div class="row">
      <div class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
      </div>

      <div class="row">

        <img class="left-sec" src="https://placehold.it/200x200" alt="" />


        <div class="right-sec">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
        </div>
      </div>

      <div class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
      </div>
    </div>
  </div>
</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

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Positioning a box at the bottom rather than at the top

I am on the lookout for a solution to shift/arrange divs to the bottom instead of the top. For example, when attempting to delete some of the divs with the "box" class in this code snippet: Current code: #hol ...

htmlcss

What's the best way to position a grid item so that it moves along with its fellow siblings

I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's exi ...

htmlcsscss-grid

Expand and Collapse Button for Customizing Table Height Individually

I trust everything is going smoothly. A challenge I'm facing involves implementing a button to expand a specific row within a table. Currently, clicking the "show more/show less" button extends all rows when the goal is to do it for each individual ta ...

javascriptcssreactjsfrontend

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

Bootstrap Table Layout with gaps between rows, enclosed in a border with no borders inside cells

Does anyone know how to achieve this style using bootstrap 5? https://i.sstatic.net/BKDBy.png The table has space between the rows and a border around the rows, but no border between the columns. I've been attempting to recreate it for 4 hours witho ...

htmlcssbootstrap-5

What is the Significance of the Height in This Sample Menu?

I came across this interesting menu sample on W3Schools while working on my MVC layout page. My menu was looking messy, and I really liked the clean look of this one. When I pasted it into my website, it worked perfectly, but I'm puzzled about how it& ...

htmlcss

How come an image with position:absolute doesn't have a height? Even though I can clearly see its height in the browser

I'm perplexed as to why a div with display:block won't position itself below another div with the same style. Here's my code: .container{ display: block; position: relative; } .container img{ width: 100%; position: absolute; t ...

htmlcssposition

Having difficulty implementing datetimepicker with Bootstrap 4 on NPM

I've been facing an issue trying to get datetimepicker to work on Bootstrap4 using npm. Despite compiling the code without any errors and inspecting without finding any issues, it seems that the CSS is not loading properly for the plugin. Here are th ...

npmbootstrap-4datepickerbootstrap-datepickerbootstrap-datetimepicker

What is the best way to utilize $(target) within a directive?

I created a custom directive for selecting time using two blocks. The challenge is detecting the target event on specific blocks within the directive's template. Directive Template: <div class='time-picker-container'> <div clas ...

javascriptjquerycssangularjs

Using JQuery, it is possible to search for elements by one specific class while excluding others

Looking for a way to target elements with a specific class, but only if they don't have another class attached to them. Here is an example: <li class="target-class exclude-class"></li> <li class="target-class exclude-class"></li& ...

javascriptjqueryhtmlcss

Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website! To demonstrate what I have tried in a simple way, I created an e ...

javascriptjqueryhtmlcssajax

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

cssreactjsoptimizationnpmsass

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...

cssreactjstypescriptsass

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

javascriptjqueryhtmlcssangularjs

Move the menu position in Bootstrap 4 navbar

<div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Hidden content</h5> <span class="text-muted">Toggleable via the ...

htmlcssbootstrap-4

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

javascriptjqueryhtmlcss

Ways to solve the issue of the mobile dropdown menu in Bootstrap

Check Out the Expected Look Here (Image link) See How it Appears on Mobile Devices The dropdown menu causes an increase in the size of the navbar on the mobile version. Below is the code snippet: <div style=" background-image: url(https://i.imgu ...

htmlcsstwitter-bootstrapbootstrap-4

Turn on and off jquery sorting with a simple click

One issue I'm facing is with a button that I toggle on click. This button is supposed to enable the jquery sortable class on a list in my html named "subtaskTaskList". Despite being able to toggle the button, I can't seem to get the sortable enab ...

javascriptjqueryhtmltwitter-bootstrapjquery-ui

Guide to dynamically adding two CSS files in a single component in Angular 8

Within this component, there is a form that needs to support two languages, each with its own unique CSS style - one for left-to-right (ltr) direction, and the other for right-to-left (rtl) direction. Is there a way to conditionally apply two different CS ...

cssangulartypescriptformsangular8