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*/
}