How to keep two div next to each other?

Question

I'm trying to keep these two divs side by side. I've set 50% width for them but still they are under eachother. What's wrong?

div{
  border: 1px solid;
  display: inline-block;
  width: 50%;
}

<form>
  <div>
    two
  </div>
  <div>
    one
  </div>
</form>

I don't want to use flex display. Noted that, it would be ok if I set 49% for the width property, but doesn't look standard to me. Also as you know, that 1px border has nothing to do with the issue.

How can I keep them next to each other? Thanks in advance

that's because margin and border also add up while calculating width of the div. better to use flexbox in this cae — boxdox, Jul 05 '21 at 08:17
Well If no restrictions I will suggest to use either bootstrap GRID or FLEXBOX to work with such things as they can adapt easily as per the screen size and that will also avoid extra CSS for various screen sizes. — Sanjeev_gupta2812, Jul 05 '21 at 08:24
@Anonymouse Because I don't know how `flex` works exactly .. I need to read about it and I have no free time at the momemnt.. — Martin AJ, Jul 05 '21 at 08:32
@MartinAJ i see, its one of the most usefull thing in css so i really recommend you to learn it in ur free time — I_love_vegetables, Jul 05 '21 at 08:38

Fabrizio Calderan · Accepted Answer · 2021-07-05T08:26:02.540

2

There are two issues here:

You need to set a box-sizing so that the width of the element includes the border
You need to remove the newline between the divs since it takes an extra space

div{
  border: 1px solid;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
}

<form>
  <div>
    two
  </div><!-- you need to remove space here --><div>
    one
  </div>
</form>

edited Jul 05 '21 at 08:26

answered Jul 05 '21 at 08:18

Fabrizio Calderan

115,126
25
163
167

I see .. great, thx – Martin AJ Jul 05 '21 at 08:19
Just as a side note, my code structure looks dirty when I remove that space (new line in reality) .. Any other idea to keep the code clean? – Martin AJ Jul 05 '21 at 08:22
you could set a font-size: 0 to the parent and restore it to the children, but I strongly recommend flexbox, this is a way better option. – Fabrizio Calderan Jul 05 '21 at 08:24

How to keep two div next to each other?

1 Answers1