I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout.
Here is the HTML code snippet:
<div class="views-field views-field-title">
<span class="field-content">
<div class="field_home_team-wraper"><a href="/match/arsenal-vs-west-bromwich-albion-live"><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="/match/arsenal-vs-west-bromwich-albion-live"><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>
</div>
The CSS for this section is as follows:
div.view-id-current_match_of_the_day div.views-field-title {
position: relative;
margin-bottom: 5px;
}
.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
width: 50%;
padding-bottom: 1.5em;
}
.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
display: inline-block;
position: relative;
}
.view-id-current_match_of_the_day div.field_home_team-wraper img, .view-id-current_match_of_the_day div.field_away_team-wraper img {
width: 40%;
}
.view-id-current_match_of_the_day div.versus-wraper {
width: 10%;
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
}
Despite my expectations, the two divs do not render correctly on one line as shown in this image:
https://i.sstatic.net/7PBta.png
- Upon initial loading, the layout breaks into two lines like this:
https://i.sstatic.net/dQ57s.png
This issue occurs on Chrome (PC), Chrome (iOS/Android), and Safari (iOS) but does not show up on Firefox or Edge (PC).
- On returning to the homepage after clicking around, the layout renders correctly.
After investigating, it appears that the layout break occurs when the browser has already rendered the page before receiving a response about the images being loaded from the server. Subsequent loads show correct rendering as the images are retrieved from the local cache.
If float:left is added to div.field_home_team-wraper and div.field_away_team-wraper, the issue is resolved, but using float in CSS styling is something I want to avoid.
Removing div.versus-wraper fixes the problem, but since this div is required and positioned absolutely, its removal is not ideal.
Suggestions to remove the space between inline-block elements were implemented without success. Please provide guidance on resolving this issue. Thank you.