How to Force Div Contents to Stay in One Line With HTML and CSS

How can I force div contents to stay in one line with HTML and CSS?

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

How Can I Force Items To Stay In Line

Add margin-top: auto; to the buttons. That will force them to the bottom of the flexbox.

Since there's no code, it's hard to know if this solution will work properly and makes some assumptions about your code.

body {  margin: 0;}
* {  box-sizing: border-box;}
.row {  display: flex;  max-width: 500px;}
.card {  display: flex;  flex-direction: column;  width: 33.33333%;  padding: 1rem;}
.button {  align-self: center;  margin-top: auto; /* This is the magic. */  padding: 1rem;  background-color: skyblue;}

<div class="row">
  <div class="card">    <h2>Title Short</h2>    <div class="button">Button</div>  </div>
  <div class="card">    <h2>Title Long Title Long Title Long</h2>    <div class="button">Button</div>  </div>
  <div class="card">    <h2>Title Short</h2>    <div class="button">Button</div>  </div>
</div>

Force divs to be on the same line

Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.

Inline-block fiddle: http://jsfiddle.net/C3877/8/

In addition, since you only care about Chrome, you could look into flexible boxes

A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/

How do I force all ul elements to stay in one line?

reduce your padding in your menu ul li a to 10px 20px

.menu > ul > li > a {
    padding:10px 20px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
    text-transform:uppercase;
    font-weight:bold;

}

and they'll stay on the same line

Div's in one line

Lorenzo's answer is correct, but I would add something to the markup:

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    <div class='pageHolder-footer'></div>
</div>

in CSS, add:

div.pageHolder-footer{
    clear: left;
    height: 0;
}

So that the rest of your stuff will flow correctly.

==Alternative method (From Jan, and SitePoint) ==

No need to have the div.pageHolder-footer (but keep pageHolder). And then:

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

They both may have drawbacks, but it depends on what you need.

How to force inline elements to stay one same line?

Don't use inline-block use inline

You also can try this: div {  padding: 5px;}
.father {  display: block;  width: 200px;}
.child {  display: inline;}
.red {  background: red;  color: white;}
.blue {  background: blue}

<div class="father">  <div class="child red">    I am red red red red red red red red  </div>  <div class="child blue">    I am blue  </div>  <div class="child red">    I am red  </div>  <div class="child blue">    I am blue  </div></div>

How do I force a and p elements to stay on the same line?

how about using span tag instead of p tag.

<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>

How to force inline divs to stay on same line?

If you are open for some HTML changes, then this should give you exactly what you want:

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

and css to be:

html, body {
  margin: 0px;
  padding: 0px;
}
#parent {
  background-color: #eee;
  height: 48px;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colwrap{
    overflow:hidden;
    background-color: orange;      
}
#colCenter {
  height: 48px;  
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/ Hope that helps.