How do I prevent DIV tag starting a new line?

HtmlCss

Html Problem Overview

I want to output a single line of text to the browser that contains a

tag. When this is rendered it appears that the DIV causes a new line. How can I include the content in the div tag on the same line - here is my code.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

I have tried to tidy it up here. How can I have this display on a single line?

Html Solutions

Solution 1 - Html

The div tag is a block element, causing that behavior.

You should use a span element instead, which is inline.

If you really want to use div, add style="display: inline". (You can also put that in a CSS rule)

Solution 2 - Html

I am not an expert but try white-space:nowrap;

The white-space property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Solution 3 - Html

div is a block element, which always takes up its own line.

use the span tag instead

Solution 4 - Html

Add style="display: inline" to your div.

Solution 5 - Html

use float:left on the div and the link, or use a span.

Solution 6 - Html

A better way to do a break line is using span with CSS style parameter white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example directly in your HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>

Solution 7 - Html

Use css property - white-space: nowrap;

Solution 8 - Html

overflow-x: scroll;
width: max-content;

Worked for me, hope this helps someone else.

(Use case: I had a lot of divs in a row that were breaking to the next line, but I wanted the user to scroll to the right instead in this case)

Solution 9 - Html

<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

Solution 10 - Html

You can simply use:

#contentInfo_new br {display:none;}
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

How do I declare a two dimensional array?

PhpArrays

Next Solution:

What should I choose: GTK+ or Qt?

LinuxQtGtk

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionundefinedView Question on Stackoverflow
Solution 1 - HtmlSLaksView Answer on Stackoverflow
Solution 2 - HtmlShivanshuView Answer on Stackoverflow
Solution 3 - HtmlcobbalView Answer on Stackoverflow
Solution 4 - HtmlFranzView Answer on Stackoverflow
Solution 5 - HtmlJimmehView Answer on Stackoverflow
Solution 6 - HtmlAlex. ManfrinView Answer on Stackoverflow
Solution 7 - HtmlJithjob IgnatiousView Answer on Stackoverflow
Solution 8 - HtmlJustinView Answer on Stackoverflow
Solution 9 - HtmldfilkoviView Answer on Stackoverflow
Solution 10 - Htmluser3012794View Answer on Stackoverflow