Angel Politis Angel Politis - 4 months ago 11
HTML Question

Elements do not display inline

I have two

div
elements styled with the following properties:

.elem1 {
width: 47.5%;
margin-right: 2.5%;
display: inline-block;
}

.elem2 {
width: 47.5%;
margin-right: 2.5%;
display: inline-block;
}


Note: If I reduce the margins to
2.25%
the elements are positioned inline when the parent is the
body
. If then I wrap them into a another
div
that is narrower the second element breaks to the following line again.

Since the total amounts to
100%
of the parent's
width
why are the elements not positioned inline and how can I fix this issue, so that they are positioned inline at all times?

I essentially want to float them without using the
float
property.

You can check out the following fiddles for a better visual representation:



It is necessary that the solution is within CSS only and only in the two
elem
elements as there may not be a parent container set by the user.

Answer

After some research I ended up in favour of using a negative margin since as of currently it's the most supported way contrary to other good, working solutions provided (font-size: 0;, display: flex).

In order to make it work I added the following:

.elem2 {
    margin-left: calc(2.5% - 4px);
}