CODEWITHSUNDEEP
htmlcss
spraff
spraff

Reputation: 33445

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

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.

Upvotes: 0

Views: 5445

Answers (4)

ramsesoriginal
ramsesoriginal

Reputation: 1920

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/

Upvotes: -1

sandeep
sandeep

Reputation: 92863

write this in your css:

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

Upvotes: 5

Thomas Leduc
Thomas Leduc

Reputation: 1100

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>

Upvotes: 0

Idiot
Idiot

Reputation: 1

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

Upvotes: -1

Related Questions