Why is this on the next line of my plugin?

[Alan Vende]

Forum URL: here

I wasn't sure whether to put this into this board or into the plugin development board as it has to do with HTML and not specifically plugin development itself. If it should be moved, please move it to the appropriate board. Thank you!

I'm drawing a blank on this code. I feel like it's a simple answer, but I cannot figure out why as I have never had this problem before.

I'm working on a piece of code for where my number of affiliates will go, and I put in a number to test the code with the width of the container. No matter how big I make the container, the number automatically goes onto the second line, and I'm unsure why.

Here is a visual example of what I mean:



The container is wrapped with another container that centers it and the button for the popup of my 

HTML

<div class="affchangealert"><button onclick="$('#ppdialog').dialog('open')">Change Regarding Psychic Psyghtings' Affiliation Procedure</button><div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><div class="ppafftotal">5</div></div></div>
CSS

.affchangealert {
   text-align: center;
   margin-top: 10px;
   margin-bottom: 10px;
}
I just cannot see why it's going on the next line, as I don't have a <br /> tag or anything like that.

Thank you all for any insight that you can provide!

[Chris]

You do know that a DIV is a block-level element, if you want it side by side then use an inline element such as SPAN

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><span class="ppafftotal">5</span></div></div>

or use css to give it an identity crisis

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><div style="display:inline" class="ppafftotal">5</div></div></div>

[Alan Vende]

Nov 29, 2017 21:11:33 GMT -8 Chris said:

You do know that a DIV is a block-level element, if you want it side by side then use an inline element such as SPAN

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><span class="ppafftotal">5</span></div></div>

or use css to give it an identity crisis

<div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><div style="display:inline" class="ppafftotal">5</div></div></div>

Thanks, Chris ! I'd forgotten about <span></span>. My first thought was to use <div></div> since that's what I've always done. I've rarely used <span></span>. But I decided to use <div class="ppafftotalcontainer"><strong>Total Affiliates:</strong><span class="ppafftotal">5</span></div></div> instead of giving it an identity crisis. I didn't think that that would be a nice thing to do.

Screenshot: 

Live view

Thank you for your help, Chris !