my css string jumps one line

Question

My existing web application uses css div class="medBlutext" for the texts:

 .medBluText {font: 0.7em  Book Antiqua, Georgia, Times New Roman, serif; font-size: 12px; color: #0000ff;}

When I use this div tag next to a button or other form field like this:

        <tr>
          <td align="Right"><div class="medGreyTextbold">Subject</div></td>
          <td>
            <input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
            <input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
            <cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
          </td>
        </tr>

The error message which is in url.err does not appear at the same line as the submit button but it appears below the submit button. Like there is a break tag after the submit button. if I don't use the div tag the message appears next to the send button but I need to make the text appear the same throughout so I need to use the div tag. How can I still use this div tag and make the text appear at the same line?

Answer 1

Your CSS style only has font properties, there's nothing that prevents you from using it on other elements like a span. The difference in styling that you're seeing is that a div is a block level element. It will always take up the full width of it's containing element. Which means it is going to start on a new line. Use an inline element like a span instead. Since your style is not using a property like margin and only font properties both elements should display the same.

.response-text {
  color: #0000ff;
  font: 12px  'Book Antiqua', Georgia, 'Times New Roman', serif;
}

<label for="subject">Subject</label>
<input type="text">
<span class="response-text">Some error occurred</span>

You can also set the div to display: inline; to make it behave like an inline element like a span.

---

FWIW I would look at using a different naming convention for CSS classes that doesn't use specific property values like blue. See my example above. Now, if the text color ever changes to red, you don't have an element displaying red text with a class of .medBlueText.

You might want to move away from tables for your form. Not mandatory but they're a lot less flexible than using divs. You might even want to work in flexbox.

Answer 2

<div> is a block level element which will break into a new line. Use display:inline-block instead.

.medBluText {
  font: 0.7em  Book Antiqua, Georgia, Times New Roman, serif; 
  font-size: 12px; 
  color: #0000ff;
  display:inline-block;
}
  

<table>
<tr>
          <td align="Right"><div class="medGreyTextbold">Subject</div></td>
          <td>
            <input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
            <input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
            <cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
          </td>
        </tr>
</table>