CODEWITHSUNDEEP
csshtml
Andreas
Andreas

Reputation: 187

html css make div be on the same line as text

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?

Upvotes: 10

Views: 32947

Answers (4)

Laerte Sousa Neto
Laerte Sousa Neto

Reputation: 160

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>

Upvotes: 9

Ari Susanto
Ari Susanto

Reputation: 43

Put this code in your css file

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

FIDDLE

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 4

Hany HarbY
Hany HarbY

Reputation: 68

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.

'

Upvotes: 1

Related Questions