How to Force Inline Divs to Stay on Same Line

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.

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>

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 to have force divs to stay on the same line without using position: absolute?

For each child element that needs to be horizontally aligned, set the css to:

position: relative;
display: inline-block;

If you need to adjust the vertical alignment of the child elements, you can use the vertical-align property.

You could also use display: flex on the parent element as an easier fix.

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>

How can I force spans to be on the same line as a div?

Put the CSS property display: inline-block on the div to make it act like an inline element instead of taking up the whole line.

Edit:

@Mr_Green's suggestion to use the after pseudo-element to clear each line is absolutely necessary to prevent a broken layout.

How can I force two elements to always stay on the same line in a td

You can force inline elements to stay on the same line using the CSS property white-space:

<td style="white-space:nowrap;">
  this content will not be wrapped
</td>

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

How to make multiple divs display in one line but still retain width?

You can use display:inline-block.

This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.

EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org

---

Related Topics