CSS: displaying display:block elements inside display:inline elements

Question

This code does what I want: abc is rendered next to def

<style type="text/css">
    div {display: inline;}
</style>
<div>abc</div>
<div>def</div>

This, however, creates problems:

<style type="text/css">
    div {display: inline;}
</style>
<div>
    <p>abc</p>
    <p>def</p>
</div>
<div>
    <p>ghi</p>
    <p>jkl</p>
</div>
<div>
    <p>mno</p>
    <p>pqr</p>
</div>

Because p still has display:inline, all the words are displayed vertically. There are other block level elements inside the div (e.g. ul) to consider, and arbitrarily many divs. I don't want to make p etc. inline because the desired effect is this:

abc ghi mno
def jkl pqr

How do I do this? Thanks.

Answer 1

write this in your css:

div {
  display: inline-block;
  *display:inline;/*for IE7*/
  *zoom:1;/*for IE7*/
}

Answer 2

You can use class :

<style type="text/css">
     .inl {display: inline;}
</style>
<div>
    <p>abc</p>
    <p class="inl">def</p>
</div>
<div>
    <p>ghi</p>
    <p>jkl</p>
</div>

Answer 3

why not just use span tag instead of p tag? because p tag will change to the new line

Answer 4

You can do a simple

 <section id="floated">
     <div>
           <p>abc</p>
           <p>def</p>
      </div>
      <div>
           <p>ghi</p>
           <p>jkl</p>
      </div>
      <div>
           <p>mno</p>
           <p>pqr</p>
      </div>
 </section>

and then in the css

 #floated div {
     display: inline-block;
     width: 200px;
 }

This is just a quick-and-dirty answer, there are many possibilities to achieve what you are trying to do...

EDIT

another possibility:

 <div id="multicolumn">
     <div>
          <p>abc</p>
          <p>def</p>
      </div>
      <div>
          <p>ghi</p>
          <p>jkl</p>
     </div>
      <div>
           <p>mno</p>
           <p>pqr</p>
     </div>
 </div>

and the css:

 #multicolumn {
     -moz-column-width: 200px;
     -webkit-column-width: 200px;
     column-width: 200px;
 }

Like I said, there are tons of possibilities..

EDIT 2

You can see them both here: http://jsfiddle.net/ramsesoriginal/VZEsA/

EDIT 3

Thanks for the down vote without any comment. Anyway, the examples (both here and in the jsfiddle) have been updated to reflect the new question..