Troubleshooting image alignment problem within a flexbox display

Is there a way to align the two images so that the bottom right of the first image meets the top left of the second image? I'm struggling to figure out a solution, especially considering different browser sizes. Any advice or suggestions?

.flexbox {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #F8F5F0;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%
}

.flexcol {
  max-width: 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
<div class="flexbox">
  <div class="flexrow">
    <div class="flexcol">
      <img src="https://i.imgur.com/9sOCPL1.jpg">
    </div>
    <div class="flexcol">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div class="flexrow">
    <div class="flexcol">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="flexcol"><img src="https://i.imgur.com/G55u0Uq.jpg">
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

There have been some challenges encountered in understanding how Flexbox operates.

  1. Utilizing the align-items property to vertically align the image container within a row layout
  2. Confining the img element to occupy 100% of the container's size (otherwise it will display at full size, which may not be desired)
  3. Eliminating unnecessary display: flex declarations from child elements. By applying display: flex to the parent element, all direct children inherit flex properties.

This provides a concise explanation, but for more comprehensive information, refer to the extensive Flexbox documentation.

.flexbox {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #F8F5F0;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%
}
.align-end {
  align-items: end;
}
.flexcol {
  max-width: 50%;
  width: 50%;
}
img {
  max-width: 100%;
}
<div class="flexbox">
  <div class="flexrow align-end">
    <div class="flexcol">
      <img src="https://i.imgur.com/9sOCPL1.jpg">
    </div>
    <div class="flexcol">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div class="flexrow">
    <div class="flexcol">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="flexcol"><img src="https://i.imgur.com/G55u0Uq.jpg">
    </div>
  </div>
</div>

Answer №2

Indeed, the lower right corner of the initial image connects with the upper left corner of the subsequent image. This connection can be verified by inspecting the element.

All that is required to achieve this effect is to utilize a png image without a background.

To test this concept, simply swap out the second image in the following example:

<div class="flexcol">
    <img src="https://image.freepik.com/free-photo/relaxed-brunette-woman-dressed-pajama-covered-with-soft-warm-duvet-has-deep-sleep-bedroom-poses-bed-mobile-phone-lies-near-has-some-time-before-alarm-clock-peaceful-nap_273609-45296.jpg">
</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

Tips on updating the color of the drawer component's background in Material-UI using React

I have been attempting to change the background color of a drawer component in React, but I have only been successful in changing the background behind the drawer or the field with the items. Here is the code I am using: const useStyles = makeStyles({ ...

cssreactjsmaterial-uireact-navigation-drawer

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

phpjqueryhtmlajaxcordova

Preventing Click Events from Firing During Drag in JavaScript

I have implemented a code for dragging containers left or right, which is functioning properly. Users can also click on the "thumb". However, I am facing an issue where a click event occurs even after dragging. I want to ensure that only either drag or cli ...

javascripthtmlcssdrag

Classic leading and CSS line-height traditional styling

The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...

typographycss

What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: ...

jqueryhtml

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Submitting quiz responses through a PHP based form

I am currently facing an issue with integrating forms and a quiz on my website. Individually, both work fine but when combined, they do not function as expected. Specifically, the quiz itself operates correctly, however, it fails to send the results via P ...

phphtmlarraysforms

Default close x button not functioning to close modal dialog

When I click the [X] button in my modal dialog box, it doesn't close. Here is an example of my code: $('#apply_Compensation_Leave').show(); This is the modal code: <div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="di ...

javascripthtml

What could be the reason behind an Ajax Auto-Complete feature suddenly malfunctioning when moving to a new page within the same website?

Working on a website featuring an auto-complete search box powered by Ajax, Javascript, and PHP. As the user types into the search box, an ajax request triggers a php file to query a database and return possible results. Everything works smoothly until the ...

javascriptphphtmlajaxautocomplete

Material UI's Paper component is not expanding to full width when viewed on a smaller screen size

I'm currently working on a website project and utilizing a component for displaying dark mode. However, I've encountered an issue where the Component shrinks excessively when the screen size goes below 600px, unlike other components. This is a s ...

cssreactjsmaterial-uistyleddocument

Clicking on links will open them in a separate tab, ensuring that only the new tab

Is there a way to open a new tab or popup window, and have it update the existing tab or window whenever the original source link is clicked again? The current behavior of continuously opening new tabs isn't what I was hoping for. ...

javascripthtmlusability

Define the total in a CSS attribute

I am working with multiple divs that have a specific CSS class applied to them. My goal is to manually increase the pixel value in the top property: .class { top: 100px; } div class="class" style="top:+=50px" Is it possible to achieve this functiona ...

css

Create a homepage landing page that only displays occasionally

Uncertain about the best way to phrase this question, a Wordpress user requested my help in creating a homepage that can branch off into two sections without loading every time a user visits the "home" page. Imagine visiting xyz.com and being greeted with ...

wordpresshtml

What is the best way to cause a ball to collide with a triangle power-up on a canvas

I'm currently facing an issue with the power up feature in my game. Despite successfully displaying the shape on screen, the ball fails to speed up as expected upon collision with the shape. <html> <title>Level Selector</title& ...

javascripthtmlcanvashtml5-canvas

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this: This is just an example paragraph. Click on the more link for additional information. (more...) Now comes the desire to i ...

javascripthtmlcsslayout

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

phphtmlcssmysql

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

htmlcssfirefox

How can I retrieve the value of $_POST[] immediately after a selection is made in a dropdown box

Is there a way to retrieve the $_POST value immediately after changing the select option without having to submit the form? <select name="cat_id" class="form-control" onChange="this.form.submit();" style="width:300px;"> <?php ...

javascriptphpjqueryhtmlajax

It appears that the margin is malfunctioning

Let's cut to the chase - I want to add a chat sidebar to my website, but I'm having trouble adding margins to make it close in properly. Here's the code snippet: HTML <div class="inner-chat"> <div class="chat-box-messages"> ...

htmlcss