Two <div> elements each have a width of 50% and display as inline-block, yet they are still not aligned on the same

My website features two team logos on the same line, but they sometimes appear with whitespace between them. Here is the code snippet:

<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">  
      <h2>
      Arsenal

    </h2>
    <img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
      <h2>
      West Brom

    </h2>

              <img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>

To ensure they stay in one line, I set the width to 50% and used inline-block display. However, the issue persists on PC browsers and always on iPhone browsers.

You can see the desired layout here, while the actual display looks like this.

I have already removed the white-space between the divs as seen in the source code. Any assistance in resolving this problem would be greatly appreciated.

htmlcssresponsive-design

Answer №1

After carefully reviewing the code on your website, I was unable to replicate the issue mentioned. However, I did identify some lines of code that seem to be incompatible with Chrome's requirements. It might be worth addressing those issues to potentially resolve the problem you are experiencing.

Answer №2

Hooray! I've successfully tackled this issue by simply moving div.versus-wrapper to the end of span.field-content. Everything is now working smoothly.

Despite resolving the problem, the reason behind it remains a mystery to me. There's always something new to learn in these situations, so if anyone has insights, please share them with me.

If you'd like more details about my query, you can find it here: Browser image render break css inline-block layout

Answer №3

This issue has been identified as a known bug.

When using Display: Inline-Block, it can create unwanted spaces between elements.

There are two methods to address this problem:

  • The first solution is to always include margin-right: -4px when using display: inline-block to eliminate the spaces between elements.

  • Alternatively, you can apply font-size: 0 to the parent <div> to remove spaces, and then reset the font size on the elements inside the <div> as needed. For example, you can set the font size back to 16px.

Another helpful tip is to use Box-sizing: border-box to ensure that borders, margins, or padding do not affect the width of elements when specified in percentages...

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

What is the most effective way to choose and give focus to an input using JavaScript or jQuery?

How do you use JavaScript or jQuery to focus on and select an input? This is the relevant snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </he ...

javascripthtmljquery

Extracting the href attribute from a child <a> tag

I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...

javascriptjqueryhtml

Tracking accurate responses with button click

In my quiz, I want to keep track of the correct answers selected by the player. When a player clicks on the correct answer, the counter should increase by one. At the end of the quiz, the HTML should display a message like "You got" + correct + "answers co ...

javascriptjqueryhtml

CSS: Firefox shows the menu with adequate right margin

Just delving into CSS and have successfully crafted a dropdown menu. It's all smooth sailing in Chrome and IE, but Firefox presents two challenges: 1) The color gradient appears darker in Firefox compared to the lighter green in Chrome and IE. 2) An ...

cssfirefoxmenuspace

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

Steps to trigger an action upon selecting a radio button on an HTML and CSS website

After creating a website with HTML and CSS that allows users to select options using radio buttons, I am now seeking advice on how to implement actions based on their choices. If a user selects an option, I want a specific action to occur, but I am unsur ...

javascriptphphtmlcss

How can I make my image shine when the mouse hovers over

I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...

jqueryhtmlcssstylesheetpixastic

Troubleshooting Flex alignment problem caused by Slick Carousel Slider conflicting with Bootstrap

Today marks the beginning of my question asking journey. After dedicating almost a day to solving this, I humbly seek your assistance! :D My current challenge involves using Slick's carousel alongside Bootstrap. Whenever I add the 'slick-slider& ...

jquerycsstwitter-bootstrapbootstrap-4slick.js

The mandatory input field property is malfunctioning, and the color of the input field remains unchanged

<div class="container"> <h1>Register Form</h1> <form> <div class="form-group" > <label for="name">Full Name</label> <input type="text" class="form-control" [ngClass]="{& ...

htmlcssangular

Mastering the Bootstrap 'Thumbnail Grid System'

I'm having trouble aligning all the images in my design. Even though I'm using Bootstrap's column classes (class="col-sm-4 col-md-3"), they are not displaying equally. Here is a screen recording showcasing the issue: Click here to see the s ...

pythonhtmlcssjinja2

Capture every single word except for the ones that require HTML tags

Trying to work with a 2.2mb HTML file that was created by Acrobat and is basically garbage. I need to wrap each word within the file in a span element, but I'm having issues where parts of the source code are being displayed on the HTML page. Here&a ...

javascripthtml

Instructions for making dropdown menus that dynamically reduce their options as you make selections:

I have an HTML form structured like this: Within the dropdowns, there is a uniform list of choices: Option 1, Option 2, Option 3. Users must select a value for each key, which currently functions correctly: Yet, I am seeking to enhance this functionality ...

javascriptjqueryhtmlknockout.js

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

javascriptjqueryhtmlfocusoutjquery-focusout

Cyrillic - best practices for PHP configurations, headers, and MySQL (can UTF8 be the answer?)

I am currently working on a project that requires users to input special characters, specifically Cyrillic ones like 'Врати се на почетак' (which means return to top). I need to make some special settings and I would appreciate ad ...

phpmysqlhtmlencoding

Attempting to conceal my default drop-down menu

I need to find a way to hide my drop down menu by default, as it currently shows up automatically. The drop down menu in question is under "My Account". This is the HTML code I'm working with: <li class="hoverli"> <a href="/customer/ac ...

jqueryhtmlcssinterface

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

javascriptjquerycsshtml

Incorporate the {{ }} syntax to implement the Function

Can a function, such as toLocaleLowerCase(), be used inside {{ }}? If not, is there an alternative method for achieving this? <div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3"> <label class=" ...

htmlangulartypescriptfrontend

Tips for creating a Vue component that triggers the select dropdown to open when the entire div or wrapper is clicked

I have a custom-designed select dropdown with unique symbols for the select arrow. To achieve this look, I've hidden the default select arrow/triangle and placed our symbol on top as an image file. <div class="select-wrapper"> < ...

javascripthtmlcssvue.js

Issue with Material UI: Background elements inaccessible while MUI Dialog is active

Currently, I am in the process of styling a Chatbox using MUI and encountering an issue. When the Dialog is open, I am unable to interact with the background elements. Although I can click on the content within the Dialog, I cannot access the background Fo ...

reactjsmaterial-uiresponsive-designfrontendstyling