Different Positions in Flexbox/Container

I am trying to create a series of flexbox items that have both an image and content. I want the images to alternate sides within each flexbox item (one on the left, one on the right, and so on), but I can't figure out how to make it work. Any advice or suggestions would be greatly appreciated!

CSS

.offerings {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.offeringsItem {
    width: 90%;
    height: auto;
    margin: 10px;
    padding: 15px;
    border: 2px solid #dedede;

}

.offeringsContent {
    margin: 10px;
    position: relative;
}

.offeringsImg {
    margin: 10px;
    float: left;
}

.offeringsImg img {
    max-width: 100%;
    height: auto;
    display: block;
}

.offeringsImg:nth-of-type(odd) img {
    float: right;
}

.offeringsImg:nth-of-type(even) img {
    float: left;
}

HTML

<div class="offerings">
    <div class="offeringsItem">
        <div class="offeringsImg">
            <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
        </div>
        <div class="offeringsContent">
            Hi.
        </div>
    </div>
    <div class="offeringsItem">
    <div class="offeringsImg">
        <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
</div>

htmlcss

Answer №1

If you plan on utilizing flex, I recommend applying it to the .offeringsItem class exclusively, and using flex-flow: row-reverse for the desired effect.

.offeringsItem {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  padding: 15px;
  border: 2px solid #dedede;
}

.offeringsItem:nth-of-type(odd) {
  flex-flow: row-reverse;
}

.offeringsContent,
.offeringsImg {
  margin: 10px;
}

.offeringsContent {
  flex: 1;
}

.offeringsImg img {
  max-width: 100%;
}
<div class="offerings">
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
</div>

I have eliminated some unnecessary styles for simplicity and improved readability of the CSS update ;)

Answer №2

Are you looking for something similar to this?

The CSS class needs to be adjusted as well.

.offeringsItem:nth-of-type(odd) img {
  float: right;
}

.offeringsItem:nth-of-type(even) img {
  float: left;
}

Instead of targeting the div with the class offeringsImg, it should target the nth-of-type() selector on the div with the class offeringsItem because they share a common parent and the index will work correctly. Previously, they had separate parents which caused it not to work! Also, don't forget to close the final div tag in the HTML.

.offerings {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.offeringsItem {
  width: 90%;
  height: auto;
  margin: 10px;
  padding: 15px;
  border: 2px solid #dedede;
}

.offeringsContent {
  margin: 10px;
  position: relative;
}

.offeringsImg {
  margin: 10px;
}

.offeringsImg img {
  max-width: 100%;
  height: auto;
  display: block;
}

.offeringsItem:nth-of-type(odd) img {
  float: right;
}

.offeringsItem:nth-of-type(even) img {
  float: left;
}
<div class="offerings">
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
  </div>
</div>

Answer №3

When positioning your images, consider using margin-left: auto and margin-right: auto instead of relying on float

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

Perform a task upon clicking the JavaScript menu

Implementing dropdown menu items using a text link with JavaScript and CSS. You can view a demo here. I am looking to trigger an action when each menu item is clicked. Currently, they are not behaving as expected. HTML: <span class="inline-dropdown- ...

javascriptjqueryhtml

Retrieve the information in a div element from an external website by utilizing AJAX

Exploring the world of AJAX is new to me, and I am eager to fetch content from a div on an external site and display it on my own website. Below is the current code snippet I have: <html> <head> <script src="https://ajax.googleapis.com ...

javascriptjqueryhtmlajax

What is the best way to extract inner HTML content using Regular Expressions?

<div class="colmask"> <h1 class="continent_header"><a name="US"></a>US</h1> <div class="colmid"> <div class="colin"> <div class="colleft"> ....... ....... ...

c#htmlregex

JavaScript Password Form Submission - Enter your password in the form

I need assistance with setting up a password for a form. Users should be able to enter a password into a specified field, click submit, and if the password is correct, they will be redirected to buybutton.php in the same window. If the password is incorr ...

javascripthtmlformspasswords

Tips for incorporating a Python script into a online project

I've been working on a Python code that detects faces and eyes using face recognition. When the code runs in PyCharm, it displays a camera window. Now I'm trying to figure out how to integrate this window into a webpage project written in HTML, C ...

javascriptpythonhtmlcss

What is the best way to implement a dropdown in MUI and React that displays functional components as items?

Here is a list of dummy components: const OwnerList = () => { return ( <Box sx={{ display: 'flex', }} className="owner-container" > <Avatar src='https://hips.hearstapps.com/hmg- ...

javascriptcssreactjsmaterial-ui

Sending users to a different page in case the linked document from <a> cannot be located

I am in search of a way to set up an alternative link for a hyperlink in case the primary link does not exist, similar to how 'alt' works for images. I am aware of the existence of 'onerror' but it doesn't work for HTML links. I wo ...

htmlhttp-redirecthyperlink

Step-by-step guide on using variables to apply CSS

In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...

phpcss

Center a Bootstrap 4 card both vertically and horizontally without overflowing the screen

I am facing an issue with a single page layout where I have a centrally positioned card containing a form and text. Once the form is submitted, a list is displayed. However, sometimes the list is lengthy causing the card to cut off at the top with no scrol ...

csstwitter-bootstrapbootstrap-4

Disabling the Entire Page Using Jquery

I've got this cool ajax function function do_ajax_request(t){ var form = $('#edit_'+t); var loadingDiv = $('#loading_'+t); $.ajax({ url: form.attr("action"), type: "POST", data: form.serialize(), cach ...

javascriptcssjquery-uijquery

Angular and JS do not have the functionality to toggle the split button

I have a question that seems similar to others I've seen, but I haven't found a solution yet. Can someone please review my code? In the component, I have {{$ctrl.init}} and {{$ctrl.people}} assigned. I am sure this assignment is correct because ...

javascripthtmlangularjs

"Want to extend the current date (Y-m-d) by a few days? Here

On my form, there is a date input that I want to automatically set to the date that is 14 days from today. I know how to set the value to today's date, but how can I add 14 days to it? <p>Term:<br> <input type="date" name="term" i ...

phphtmldate

Utilize the Appy Wordpress Widget in your designated widget region

This is my first time working with WordPress, and I am attempting to add a custom Widget to an HTML box. Here is the HTML: The blank News box Following some tutorials, I created a new Widget area inside my functions.php file using the following code: &l ...

phphtmlwordpresswidgetarea

Using only python, launch a local html file on localhost

Currently, I am executing a code on a remote server that periodically creates an "status" HTML file (similar to TensorBoard) and saves it in a directory on the server. To check the status, I download this HTML file whenever needed. However, if I could use ...

pythonhtmlserverxampplocalhost

Modify inline BODY width using PHP

My PHP script fetches HTML content as a string, and sometimes it includes code with an inline width on the BODY tag. When this width is set to 100%, it disrupts some additional processing that takes place. I'm hesitant to apply an external style sinc ...

phphtml

Issue with scrolling in angular-ui-bootstrap modal on Apple devices with the mobile web app capability enabled

I've encountered a problem with a basic to-do list web application that I'm currently developing. In order to enable the iPhone standalone launch feature, I have included the following code: <meta name="apple-mobile-web-app-capable" content=" ...

cssangularjstwitter-bootstrap-3angular-ui-bootstrapiphone-standalone-web-app

What is the best method to display and conceal a table row in Angular 6?

In the midst of developing a table with multiple rows, I am seeking a way to invisibilize a particular row and then reveal it again using a reset button. Any tips on how to accomplish this task?emphasis added ...

htmlangularbootstrap-4

What methods can I use to minimize the gap between images within the <figure> element?

    Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work. I want to display 3 images side by side in one row, but because I'm struggling to ...

htmlcss

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

htmlcss

Disappearing Data in Chart.js When Window is Resized

I am utilizing the Chart.js library to present a line chart in a div that is enclosed within a <tr>. <tr class="item">...</tr> <tr class="item-details"> ... <div class="col-sm-6 col-xs-12 chart-pane"> <div clas ...

javascripthtmlcss