Two div have width 50% and inline-block but still not in one line (no white space)

Question

Here is my site :

<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>

You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:

But, sometime on PC browser and alway on iPhone browser, it will display like this :

I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.

1) The .versus-wrapper also has a width; 2) try width 49% on both container — ppasler, Dec 24 '16 at 15:31
Stack Overflow is not your personal debugger. We're trying to build a repository of good Q&As that will help people in the future. The absence of relevant code in your question makes it much less useful for the future (and that link will die at some point, which makes it useless too). — Oriol, Dec 24 '16 at 15:34
@ppasler : .versus-wrapper is position: absolute, so it not in line, tried 49% and even 40%, still problem. — Tran, Dec 24 '16 at 15:41
@ppasler : Chrome on PC and Chrome&Safari on iPhone. On PC, most of time it display correcly, but sometime it wrong. — Tran, Dec 24 '16 at 15:47

score 0 · Answer 1 · answered Dec 24 '16 at 18:40

0

I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.

answered Dec 24 '16 at 18:40

Quinn Langille

1
4

Thank you, what code is not good with chrome, can you explain more for me? – Tran Dec 24 '16 at 22:06
If you right click on the element you want to inspect (in this case, the element with the team logos) and click inspect. In the style window, you'll see a few rules that have caution signs beside them - those are the ones I'm referring to. – Quinn Langille Dec 24 '16 at 22:46

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.

But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.

Here is my question will more explain : Browser image render break css inline-block layout

edited May 23 '17 at 12:24

Community

1
1

answered Dec 25 '16 at 18:06

Tran

185
2
4
14

score -1 · Answer 3 · answered Dec 24 '16 at 16:08

-1

This is a known bug.

Display: Inline-Blockcreates spaces between elements.

Here are two ways to fix this:

First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px

And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...

answered Dec 24 '16 at 16:08

CodeAlb

110
8

I tried two ways you give me but still not work. The bug you say is this bug right ? : http://stackoverflow.com/questions/6871996/css-two-inline-block-width-50-elements-dont-stack To solved spaces between elements, i'm already removed spaces in html. – Tran Dec 24 '16 at 16:22
Yes. Depending on your example given , there it's only the HTML without CSS, we can't really know the problem. I will try to Inspect your website with browser to see what really it's missing... – CodeAlb Dec 24 '16 at 16:29
Have you tried using `border-box: box sizing;` on parent `
`?
– CodeAlb Dec 24 '16 at 16:33
I'm tried, not work. Other thing, Firefox display correctly. – Tran Dec 24 '16 at 16:40

Two div have width 50% and inline-block but still not in one line (no white space)

3 Answers3