I have 2 div with 50% width and inline-block, on this div have a image. I'm expected 2 div will stay in one line, but sometime, browser break the layout.
Here is html :
<div class="views-field views-field-title">
<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>
</div>
Here is css :
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;
}
As i say, I'm expected 2 div will stay in one line, like this :
But it not render correctly.
- When first load, layout break to 2 lines like this:
Chrome on PC (resize windows width less than 1024px for mobile responsive) and Chromme on IOS/Android have this problem, Safari on IOS have this problem too.
Firefox, Edge on PC not have problem.
- When click on homepage button or click something then go back to homepage, layout become render very good.
So i realize, at the first load (or refresh load), when browser requesting image to server, server not finished respone, browser already finished render the page, when image load finish, browser make a broken layout.
When second load (click on home page again), browser get the image from local cache, layout render is just good, correctly!
I record video here :
- Chrome on PC (at 30 seconds, i press Ctrl+F5 for ignore cache reload) : https://streamable.com/8xpdx
- Chrome on IOS : https://streamable.com/3bu5y
I can fix this if i add float:left to div.field_home_team-wraper and and div.field_away_team-wraper, but i need to avoid float in my css.
Another fix is remove div.versus-wraper, but i need this div and this div have absolute position, so it not in the line.
I aleady know there a space between 2 inline-block elements, so i removed space in my html : How to remove the space between inline-block elements?
I don't know what wrong here, please help.
