Place items left and right on the same line or left if there is not enough space

Question

What I want:

When there is enough space, it is like this:

.left{ display: inline-block; float: left; } .right{ display: inline-block; float: right; } 

 <div class='parent'> <div class='left'>This should be on the left</div> <div class='right'>And this should be on the right :)</div> </div> 

When there is not enough space, it is something like this:

  <div class='parent'> <div class='left'>This should be on the left</div> <div class='right'>And this should be on the right :)</div> </div> 

How to do it?

Answer 1

Try to add width.

 .left{ display: inline-block; float: left; width: 50% } .right{ display: inline-block; float: right; width: 50% } 

Demo

---

Use display: table-cell for a solution without width. And you need to insert another element to wrap the content.

  .parent{ display:table; width:100% } .left{ display: table-cell; background:grey; vertical-align:top; } .right{ display: table-cell; background: blue; vertical-align: top; } .right span{ float:right } 

updated DEMO 2

---

You have a question;) you can use the built-in display to

  .left{ display: inline; vertical-align:top; } .right{ display: inline; vertical-align: top; } .right span{ float:right } 

Demo 3

Answer 2

@media

In one approach, you can use the media css rule:

 .left{ float: left; } .right{ float: right; } /* run this in full page to check how it works */ @media all and (max-width:720px) { .right,.left { float:none; } } 

 <div class='parent'> <div class='left'>This should be on the left</div> <div class='right'>And this should be on the right :)</div> </div> 

bends

Otherwise, you can use flex (not fully compatible with all browsers right now):

 .parent { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .left, .right{ -webkit-flex: 1; flex: 1; min-width: 400px; /* line will break at min-width*2 */ border: 1px solid #555; } 

 <div class='parent'> <div class='left'>This should be on the left</div> <div class='right'>And this should be on the right :)</div> </div> 

flex + js

Javascript used to achieve proper text alignment.

 function adjustRight() { var right = document.getElementsByClassName("greenright")[0]; var left = document.getElementsByClassName("greenleft")[0]; if (left.offsetLeft == right.offsetLeft) { right.style.textAlign = "left"; } else { right.style.textAlign = "right"; } } window.addEventListener("load", adjustRight); window.addEventListener("resize", adjustRight); 

 .parent { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } /* `green` prefix added to be sure for unique classname` */ .greenleft, .greenright{ -webkit-flex: 1; flex: 1; min-width: 400px; /* line will break at min-width*2 */ border: 1px solid #555; } 

 <div class='parent'> <div class='greenleft'>This should be on the left</div> <div class='greenright'>And this should be on the right :)</div> </div> 

Js

This example is fully consistent with javascript:

 function adjustRight() { var right = document.getElementsByClassName("greenright")[0]; var left = document.getElementsByClassName("greenleft")[0]; if (left.offsetTop == right.offsetTop) { right.style.float = "right"; } else { right.style.float = "left"; } } window.addEventListener("load", adjustRight); window.addEventListener("resize", adjustRight); 

 /* `green` prefix added to be sure for unique classname` */ .greenleft{ float: left; } .greenright { float: right; } 

 <div class='parent'> <div class='greenleft'>This should be on the left</div> <div class='greenright'>And this should be on the right :)</div> </div> 

Answer 3

 .left{ float: left; } .right{ float: right; } 

 <div class='parent'> <div class='left'>This should be on the left</div> <div class='right'>And this should be on the right :)</div> </div> 

OR

 .left{ display: table-cell; background:grey; float: left; width:50% } .right{ display: table-cell; background:grey; float: right; width:50% } 

DEMO HERE

OR

 .left{ display: table-cell; background:grey; float: left; } .right{ display: table-cell; background:red; float: left; } 

DEMO HERE