CODEWITHSUNDEEP
csshtmlcontenteditable
Vivek Dani
Vivek Dani

Reputation: 327

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

<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.

Upvotes: 8

Views: 65836

Answers (9)

websky
websky

Reputation: 3172

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

Upvotes: 11

Ashwin Prabhu
Ashwin Prabhu

Reputation: 7624

Answering this question more than 5 years after it was originally posted, since none of the answers barring Tim Down's strike at the actual problem. Elaborating it further, here is what happens when you inline-block two elements:

The white space between the two inline block divs is expected. When you inline an element (or inline-block in this case), you are in affect instructing the browser to put all the elements on the same line side by side. By doing so, you are in affect treating your divs equivalent to the white-spaces on the line (space/tab etc) as they share the line space.

In your snippet, you have 4 space characters between the closing div tag (</div>) and the next opening <div> tag. Browser rendering engine shrinks multiple spaces into a single space and that single space takes up the extra character which is what you are observing in this case.

So, once you understand the above, you can easily solve this by adopting one of the many workarounds like:

<div id="a" class="fif">text1</div><!-- 
--><div id="b" class="fif">text2</div>

or 

<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>

or

<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>

The last one is a invalid XML, but browsers do not barf at this.

Your fiddle is forked with the above workarounds here: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/

Upvotes: 1

Md Sifatul Islam
Md Sifatul Islam

Reputation: 854

use display:inline for the inner div

 #test div{
      display:inline;

    }

Upvotes: 2

Tim Down
Tim Down

Reputation: 324587

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>

Upvotes: 14

Sergiu
Sergiu

Reputation: 355

http://jsfiddle.net/hari_OM/4GfcJ/2/

Here it is without any space.

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

Upvotes: 0

MIIB
MIIB

Reputation: 1849

Ok I figure it out if you have access to the html code.

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



<style>
.pad {
    background-color: #eee;
    padding: 0px;
    overflow:hidden
}
.fif {
    display: inline-block;
    margin: 0;
    padding: 0;
}
table,td,tr{
padding:0;
}

#a {
    background-color: #ddd;
}
#b {
    background-color: #ccc;
}
</style>

Upvotes: 0

Shannon Duncan
Shannon Duncan

Reputation: 178

I tested out an idea, and it worked for what you are talking about I believe.

<html>
    <head>
        <title>test</title>
        <style>
            .fif{
                padding:0px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="test" class="pad" contenteditable="true">
          <div id="a" class="fif">text1</div>
          <div id="b" class="fif">text2</div>
        </div>  
    </body>
</html>

Hope that helps!

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20452

Well

.pad {
    background-color: #eee;
    padding: 4px;
    overflow:hidden  /*  first */
}
.fif {
    display: inline-block;
    margin: 0;
    padding: 4px 8px;
    float:left  /* second part */
}

jsFiddled here

Upvotes: 1

isherwood
isherwood

Reputation: 61083

I'm not sure I fully understand, but this might help: http://jsfiddle.net/UwZsm/3

.fif {display: inline-block; margin: 0 -4px 0 0;}

Upvotes: 0

Related Questions