Using CSS "inline" attribute for <div> tags, how to make <p> tags stay inside them

HTML & CSS
1

.

Hello;

I need to display <div> tags side-by-side or inline. This style sheet code will do what I need:


div.display_inline
{
display: inline;
}

Using just the <div> tags the text displays inline just fine.


<div class="display_inline">
	one two three
</div>

<div class="display_inline">
	four five six
</div>

The above will display “one two three four five six” on one line.

However, if I try to enclose the text within each <div> tag with a <p> tag like this:


<div class="display_inline">
<p>one two three</p>
</div>

<div class="display_inline">
<p>four five six</p>
</div>

The text ends up on two lines like this:

“one two three
four five six”

Can somebody tell me how to make the text within each <p> tag stay inside of the <div> tags?

Thanks.

2

I would recommend you use float: left on those divs and give them a width (either in pixels or something approaching 50%).

But you could also just set a width on the divs, but as I say, I think floats are better for this.

3

Hello,

The p element’s default display’s value is block. You have to set the inline display’s value for them too:

div.display_inline,.display_inline p  {
   display: inline;
}
4

ralph.m, Candygirl;

Thank you for responding to my question. I just got through trying the solutions. They both work really good.

Thanks again. :slight_smile: