The left float is not functioning properly with a particular icon

https://i.sstatic.net/rLvgF.png

JSFiddle

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card">
        <!-- airplane icon img -->
        <img src="https://i.sstatic.net/7P0v6.png" alt="airplane" class="card__icon">
        <div class="card__body">
          <h3>Lorem Ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
        </div>
      </div>
    </div>
  
    <div class="col-6">
      <div class="card">
        <!-- gamepad icon img -->
        <img src="https://i.sstatic.net/WgWTv.png" alt="gamepad" class="card__icon">
        <div class="card__body">
          <h3>Lorem Ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
        </div>
      </div>
    </div>
    
    <div class="col-6">
      <div class="card">
        <!-- airplane icon img -->
        <img src="https://i.sstatic.net/7P0v6.png" alt="airplane" class="card__icon">
        <div class="card__body">
          <h3>Lorem Ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
        </div>
      </div>
    </div>
  </div>
</div>

.container{
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.row:before,.row:after{
  content: '';
  display: block;
  clear: both;
  display: table;
}

.col-6{
  width: 50%;
  float: left;
}

.card{
  margin-bottom: 50px;
}

img{
  max-width: 100%;
  height: auto;
}

I utilized the CSS float property to create the columns without relying on any framework. Everything appears in order except for the last column in the row which is not floating left. Any insights on this behavior?

Fascinating Observation: I have incorporated only two icons - Airplane and Gamepad. Interestingly, swapping the Gamepad icon with the 'Airplane' icon resolves the issue! The reason behind this phenomenon remains a mystery.

htmlcss

Answer №1

To achieve the desired outcome, make sure to apply the following CSS rule:

float: right;

This will align everything as needed.

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

Step-by-step guide on linking an HTML file to a SQL database using Node.js

I am currently working on integrating my SQL database with an HTML file for my website. I've come across suggestions to utilize Node.js for this task, but I'm a bit confused on how exactly to incorporate Node.js into my HTML and integrate it with ...

javascripthtmlmysqlnode.js

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

Adding an element to a page and watching it come to life with a dynamic CSS animation in

When the button is clicked, I want to add a Label to the page and fade it in using a CSS animation. My initial thought was to create and add the label with the CSS class "hidden" attached, which sets the opacity to 0, and then remove the class to trigger t ...

javajavascriptcssgwt

Issue with HTML input tag in MVC 4 causing error message "string constant not properly terminated"

Hello, I am encountering an error while attempting to create a button in HTML. The error message states: "Unterminated string constant" Below is the code snippet causing the issue: <input id="topImageNavigationPreviousButton" type="button" value="Previ ...

htmlrazorsyntax-error

Guide to dynamically generating checkboxes or multi-select options in ASP.NET MVC 4

Within this project, we have implemented two separate lists - one for the dealer and another for their products. Currently, when selecting a specific dealer, all associated products are returned using JavaScript (Json). Utilizing Html 5: @using (Html.Be ...

javascriptjsonhtmlc#-4.0asp.net-mvc-4

ScrollMagic Fading Transition

I have a block of HTML that fades in when the trigger element is activated, but also fades out when the user scrolls back past the trigger. I don't want it to fade out – I want it to stay faded in until the user hits F5 or reloads the page. $ ...

javascriptjqueryhtmlgsapscrollmagic

When switching between tabs on Twitter Bootstrap, the page automatically scrolls to the top

I am encountering an issue with my tabs setup. Each tab has a different height and there is a Row on top of the tabs. You can see the problem in action on this JSFiddle. Whenever I switch from a tab with greater height to a tab with less height, the page ...

jqueryhtmlcsstwitter-bootstrap

The drawback of using a datepicker within an Angular input field

When attempting to open the Angular Material datepicker, it was appearing above the input field. How can I make it open below the input field instead? <mat-form-field appearance="outline" class="w-100 date-class"> < ...

cssangularangular-materialmat-datepickermat-form-field

"Enhancing User Experience with Bootstrap's Smooth Transition Effects for fadeIn() and fade

As someone who is new to html and JavaScript, I have the following html code: <div class="row" > <button class="..." id="button"> ... </button> <div class="..." id="box"> ... </div> </di ...

javascriptjqueryhtmltwitter-bootstrap

Tips for sending HTML information to a .aspx document and storing it

I am looking to create some dynamic controls in ASP.NET, so I have created an HTML file and used JavaScript to repeat these controls. Now my challenge is how to post the data entered into these controls to an .aspx file and save that data into a database ...

javascriptasp.nethtml

Loading New Content in a Bootstrap Card with Navbar: A Guide on Updating Content without Refreshing the Page

Working with Django in the creation of a basic website, one specific page named analysis.html is utilized to access data from the Twitter API. Within the analysis.html file, there exists a card sourced from Bootstrap's components: <div class="car ...

htmlcssbootstrap-4

What is the best approach to refreshing a particular div with the contents of a view file?

I have a block of code in PHP/Symfony that looks like this: <div id='content'> <?php include_partial( 'course/content.php', array("param1" => "1", "param2" => "2") ); ?> </div> Now, I am interested in updatin ...

phpjqueryhtml

Ways to left-align the columns themselves, rather than the content within them, in a table

Creating a table without knowing the number of columns in advance can be tricky. If you have a wider first column and want the rest to be the same width, it's important to align them properly so they fill the space on the left and leave room on the ri ...

htmlcss

When you hover over the image, a thin white line materializes along the bottom edge

Can anyone help me troubleshoot an issue I am facing with a white pixel line that appears at the bottom of every image within the "div class gallery" element? The white line seems to only show up when the mouse hovers over the images, especially since I ha ...

htmlcsshovercss-transitionstransform

Enhancing the smoothness of parallax scrolling

My header is going to be twice the height of the viewport. I added a simple parallax effect so that when you scroll down, it reveals the content below. However, I'm experiencing flickering in the content as I scroll, possibly due to the CSS style adju ...

javascriptjqueryhtmlcss

A distinct alias for the identical custom control

Suppose we create a custom control, for example: [assembly: TagPrefix("CustomControls.UI", "custom")] public class CustomTextBox : TextBox { ... } When using this custom control in HTML code, we typically have to reference it like this: <custom:Cus ...

c#asp.nethtmlcustom-controls

Expansive CSS Navigation Bar Design

Currently, I am using WordPress along with a premium theme. I wanted to adjust the size of the navigation bar, so I included the following CSS styles: li { float: left; } a { display: block; width: 60px; } After applying these styles, the na ...

csswordpressnavigation

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss

Adjust Side Navigation Bar based on window size alteration

I am currently working on implementing a side navigation bar for a website. At the moment, I am utilizing a <nav> element and populating it with <li> items to establish my sidebar. My code snippet is as follows (note: in-line styling is tempor ...

javascriptjqueryhtmlcssnav