CODEWITHSUNDEEP
htmlcss
songyy
songyy

Reputation: 4563

Position elements left and right on same line, or both left if not enough space

What I want:

When there's enough space, it's 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's not enough space, it's 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 do I do that?

Upvotes: 6

Views: 3584

Answers (3)

Aki
Aki

Reputation: 2928

@media

One of the approaches could use 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>

flex

Otherwise you can use flex (not fully compatibile 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 in order to achieve proper text-aligining.

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 one is fully javascript powered example:

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>

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

.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

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Try adding width

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

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

Demo

Use display: table-cell for non-width solution. 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
}

DEMO 2 updated

Got your question ;) you can use display inline for that

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

Demo 3

Upvotes: 4

Related Questions