9

My question is, how do I avoid having the text on a new row?

My code:

<html>
<body>
<p >Seating availability.</p>
<p ><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div> There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>

How should I code this?

Ashkan Mobayen Khiabani
  • 33,575
  • 33
  • 102
  • 171
Andreas
  • 177
  • 1
  • 4
  • 13
  • Search http://stackoverflow.com/search?q=[html]+div+same+line+is%3Aq; Possible duplicates http://stackoverflow.com/q/12171992/1741542, http://stackoverflow.com/q/16312650/1741542, ... – Olaf Dietsche Oct 30 '13 at 11:40
  • 1
    problem is your

    tag.this tag take each line as separate paragraph.so use single

    for all the div.

     –  Oct 30 '13 at 11:41

4 Answers4

8

add display: inline-block to div

<html>
 <head>
  <style>
   div
   {
     display: inline-block;
   }
</style>
</head>
<body>
<p >Seating availability.</p>
<p><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div>There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>
DilumN
  • 2,889
  • 6
  • 30
  • 44
Laerte Sousa Neto
  • 150
  • 1
  • 7
4

There are so many display properties are available:

Try using display:inline-block;

div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>

Hope this helps!

fiddle-Demo

Remove <p></p> tag just use <div> as <p> is always takes new line.

Updated Fiddle

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
1

Use span instead of div and add (display:inline-block;) paragraph (p) Can't Contain (div) but can contain (span) ' Seating availability.

There are available seats. Available seats are decreasing. Less than 15% of seats available. There are no available seats. '
Hany HarbY
  • 68
  • 7
0

Put this code in your css file

div {
    margin: 5px 10px 0 0 ;
    float:left;
}

FIDDLE

Ari Susanto
  • 43
  • 3