Untitled

CSS: displaying display:block elements inside display:inline elements
<style type="text/css">
    div {display: inline;}
</style>
<div>abc</div>
<div>def</div>

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

abc ghi mno
def jkl pqr

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

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

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

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

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

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