Reputation: 5328

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?

Upvotes: 106

Answers (11)

namgold

Reputation: 1070

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>

Upvotes: 4

Justin

Reputation: 1059

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)

Upvotes: 1

Alex. Manfrin

Reputation: 21

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>

Upvotes: 2

Jithjob Ignatious

Reputation: 13

Use css property - white-space: nowrap;

Upvotes: 0

user3012794

Reputation: 1

You can simply use:

#contentInfo_new br {display:none;}

Upvotes: -2

Shivanshu

Reputation: 1269

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

Upvotes: 51

SLaks

Reputation: 887453

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)

Upvotes: 165

dfilkovi

Reputation: 3081

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

Upvotes: -1