What causes images to shift when resizing in Chrome, but not in Firefox or Safari?

My layout includes images - one on the left and two on the right. As I resize the browser window, the images scale accordingly.

The issue arises when viewing my layout in Chrome: the image positions shift as I resize the browser, unlike Safari and Firefox where they remain consistent.

To better illustrate the problem, here is a jsfiddle example:

http://jsfiddle.net/sSZFA/6/

Additionally, here is a snippet of the code used:

        #col1{
           width:50%;
           float:left; 
        }

        #col2{
           width:50%;
           float:left; 
        }

        #img1{
           width:50%;
           float:right;
           clear:both;
        }

        #img2{
           width:50%;
           float:right;
           clear:both;
        }

        #img3{
           width:50%;
        }
    ​

            <div id="col1">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
    </div>
    <div id="col2">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>

​ ​

Answer №1

Adjust the size of image 3 from 50% to 49% ....

#img3 {
width:49%;
}


View a live demo here

Answer №2

Increasing the image width to 49% created unsightly gaps, but I managed to find a solution.

The culprit appears to be the "clear:both" CSS property that was causing issues in Chrome. By rearranging the elements and eliminating the clear attribute, the problem was resolved.

If anyone can shed light on why my original code failed in Chrome, I would greatly appreciate it.

Click here for the JSFiddle link

#col1{
   width:50%;
    float:left; 
}

#col2{
   width:50%;
    float:left; 
}

#img1{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img2{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img3{
    width:50%;
    float:left;
}

    <div id="col1">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">  
    </div>
    <div id="col2">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.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

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem ...

Transfer data from an HTML form -> call the ajax load() function

My Current HTML Form Situation Currently, I have an HTML form set up with a text input field and a submit button. When the button is clicked, I want the output results to display in only a specific part of the page without refreshing the entire page. Ste ...

JavaScript powered simple window

I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail. The modal is linked to an image slider where the heading change ...

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

Having trouble getting the Bootstrap tooltip to work on a Select option?

Is there a way to have a tooltip displayed for each option in the select box? <select ng-model="rightList" class="form-control" size="13" multiple> <option ng-repeat="item in selectedList" value="{{$ ...

Retrieve the most recent ajax request and cancel any other ones

I've been exploring this issue and it seems fairly straightforward, but I'm having trouble finding a solution. I have several requests that call different URLs. However, for each URL, I only want to receive the last result from the same URL being ...

easy method for creating a hyperlink that triggers a "download" pop-up box

Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...

Hovering over an option in Vue-Bootstrap b-select

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

Display a substitute image if there is no internet connection available to load the Google Map Canvas

I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

I'm just starting out with JavaScript and I'm attempting to create a scrollable div that includes items from an array. As the user scrolls and each item reaches the top, I want a hidden element to be displayed. Here's what I have so far: ...

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day... I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" c ...

reduce opacity of specified div background

Objective / Purpose I am working with multiple div elements and I want to assign two distinct classes to each of them, each serving a different purpose within my application. One class should determine the level, influencing the color of the div. The oth ...

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

jQuery toggle buttons to show or hide on radio button selection

I have a pair of buttons and a pair of radio buttons Buttons 1) btnErp 2) btngoogle Radio Buttons 1) rdiogoogle 2) rdioErp When I select 'rdiogoogle', 'btngoogle' should be visible while 'btnErp' should be hidden. Conve ...

Implementing jQuery form.js to dynamically update image src upon success

I am currently utilizing jquery.form.js to submit a form via AJAX and retrieve a response. My PHP page is configured to output the image URL in the format "images/thumbs/071112130957.jpg" Below is my jQuery code: $("#imageform").ajaxForm( { target: &ap ...