Elements do not display inline

Question

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.

See: http://stackoverflow.com/questions/10698636/ – jlynch630 Jul 12 '16 at 18:40 — jlynch630, Jul 12 '16 at 18:40

score 2 · Answer 1 · answered Jul 12 '16 at 18:57

2

Inline elements allow regular text to be written so because of the line-break, it is assumed that you added a space in between the div elements. This causes the extra space in-between the div elements which leads to the div elements not fitting in the same line. I usually add a comment in between the elements to override this behavior as well as serve as a reminder to myself and others who may look at the code.

<div class="elem1" style="height: 50px; background-color: black;"></div><!--
   This comment is added to prevent space in-between these elements.
--><div class="elem2" style="height: 50px; background-color: black;"></div>

answered Jul 12 '16 at 18:57

10100111001

1,832
1
11
7

Your answer unexpectedly works, but I can't modify the HTML. I need a CSS only solution. – Angel Politis Jul 12 '16 at 19:05
@AngelPolitis Ah, I didn't see that part of the requirement. – 10100111001 Jul 12 '16 at 19:07
@AngelPolitis How about setting the font-size of the body tag to be 0px? It may not be idea but what from the sounds of your question, it sounds like you're allowing users to have access to these elements which is not ideal either. – 10100111001 Jul 12 '16 at 19:28
Setting **`font-size`** to **`0`** has some unexpected behaviour in some browsers (Opera, Android). I am going to keep it in the back of my mind though. – Angel Politis Jul 12 '16 at 21:26

score 1 · Answer 2 · answered Jul 12 '16 at 18:40

1

display: inline-block; have some space after by default. To remove it, use font-size: 0 for .container

Here is example.

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 75%;
  font-size: 0;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}

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

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

<div class="container">
  <div class="elem1" style="height: 50px; background-color: black;"></div>
  <div class="elem2" style="height: 50px; background-color: black;"></div>
</div>

Here is a great article about this spaces between lines of text.

answered Jul 12 '16 at 18:40

AleshaOleg

2,171
1
15
29

**Your answer doesn't work**. I want the margin between them to **`2.5%`**, not **`2.25`**. I just made it **`2.25%`** to show that with a smaller margin they would be inline. – Angel Politis Jul 12 '16 at 18:52
@AngelPolitis changed to `2.5%` - everything works. https://jsfiddle.net/AleshaOleg/6ugefk4p/10 – AleshaOleg Jul 12 '16 at 18:54
Setting **`font-size`** to **`0`** has some unexpected behaviour in some browsers aka Opera and Android. Thanks though. – Angel Politis Jul 12 '16 at 21:27

score 1 · Answer 3 · answered Jul 12 '16 at 20:48

If you have the browser support, you can add display: flex to the containing element. In this example, I put it on the body.

body {
  display: flex;
}

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

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

<div class="elem1" style="height: 50px; background-color: black;"></div>
<div class="elem2" style="height: 50px; background-color: black;"></div>

It works with your third example too. I added display: flex to .container.

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 75%;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: flex;
}

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

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

<div class="container">
  <div class="elem1" style="height: 50px; background-color: black;"></div>
  <div class="elem2" style="height: 50px; background-color: black;"></div>
</div>

Your answer is a very good option, but probably for future use as it's not currently as widely supported. — Angel Politis, Jul 12 '16 at 21:24

score 0 · Accepted Answer · answered Jul 12 '16 at 21:32

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);
}

Elements do not display inline

4 Answers4

Linked

Related