Search code examples
htmlcssflexboxellipsis

Make left div fill the remaining space

Based on this post I try to make the left div to fill up remaining space, left and right should always be in one line where the right div should be fully visible.

How to accomplish that?

#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
#right {
  float: right;
  background-color: #00FF00;
}
<body>
  <div>
    <div id="left">
      left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
    </div>
    <div id="right">
      this text is dynamic - should be fully visibile
    </div>
  </div>
</body>

Edit:

Flex-box answer not working. It looks like that if the green text becomes shorter:

enter image description here

What I want is the green div to become smaller now, when the text is short.

Solution

  • This is easy if you are opting for a flexbox - see demo below:

    1. Add display: flex to your wrapper and remove the floats

    2. Add white-space:nowrap to right

    .wrapper {
  display:flex;
}
#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex:1;
}
#right {
  background-color: #00FF00;
  white-space: nowrap;
}
    <div class="wrapper">
  <div id="left">
    left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
  </div>
  <div id="right">
    this text is dynamic - should be fully visibile
  </div>
</div>