Display two divs on same line without blankspace in between, inside a div with contenteditable="true"

Question

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div>
  <div id="b" class="fif">text2</div>
</div>  

As in above code I have a contenteditable div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1 and text2 (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditable div if I press ENTER key it should go to next line.

I tried float:left but it does not allow me to go to the next line when I press ENTER key while typing in contenteditable div. display:inline, span when used show blank space in between 2 div contents. I tried using flex from http://www.w3.org/TR/css3-flexbox/ but didn't get desired output.

Answer 1

Just make the <div>s have display: inline or display: inline-block and remove the white space between them in the HTML source.

Whether you use inline or inline-block depends on how you want content within the divs to be laid out. Here's an MDN article on the subject.

Demo: http://jsfiddle.net/timdown/GVZPX/

CSS:

.fif {
    display: inline; /* Or inline-block */
}

HTML:

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>

Answer 2

<div>
  <div style="display: inline-block;">1</div>
  <div style="display: inline-block;">2</div>
</div>