Reply To: inline-block with ordered list and multiline

[Paulie_D]

And why can’t I use 50% width for the second container? I thought 50% + 50% = 100% But if that second container gets 50% width it jumps into the next row.

Because with inline-block you have to account for font-size as inline-block also counts whitespace in your HTML and will leave a space between each block.

Usually you can solve this problem by setting the parent element’s font-size to zero BUT, in this case, you can’t do that as it would make the li numbering disappear.

What you CAN do is introduce a little negative margin to counteract the issue.

http://codepen.io/Paulie-D/pen/rbCiD

http://www.ternstyle.us/blog/float-vs-inline-block