How do I prevent DIV tag starting a new line?

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?

---

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)

---

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".

---

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

use the span tag instead

---

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

---

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

---

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>

---

Late answer in 2022:

If you are using 2 div element, white-space: nowrap won't works, instead wrap them by a div by display: flex along with flex-wrap: nowrap (which is default enabled).

This solution work well when you have multiple divs in a row, but you need 2 of them always on the same row when responsive in small screen device. inline solution can't achieve this (unless with nowrap).

div.wrapper-whitespace, div.wrapper-whitespace-with-inline {
  white-space: nowrap;
}

div.wrapper-whitespace-with-inline > div.item {
  display: inline;
}

div.wrapper-flex {
  display: flex;
  flex-wrap: nowrap; /* this is default */
}

div.item {
 border: 1px solid black;
 width: 100px;
}

<div class='item'>div</div>
<div class='item'>div</div>

<br>

<div class='wrapper-whitespace'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-whitespace-with-inline'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-flex'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

---

Use css property - white-space: nowrap;

---

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)

---

<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>

---

You can simply use:

#contentInfo_new br {display:none;}