Align div side by side with first taking the whole width that the second div doesn't need

Question

I have a line where the label and a button should be shown. The label should be aligned left, the button should be aligned right. The label should take all space that the button does not need. The label text AND the button text is dynamic, so no fixed length can be used.

How can I achieve this without using Javascript?

.label
{
  background-color: yellow;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buttoncontainer
{
  text-align: right;
}

<div class="container">
  <div class="header">
    <div class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</div>
    <div class="buttoncontainer">
      <button>Zoom in</button>
    </div>
  </div>
  <div class="#body">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie
  </div>
</div>

Similar question here: http://stackoverflow.com/questions/1260122/expand-a-div-to-take-the-remaining-width . — vv01f, Apr 21 '17 at 08:07

score 0 · Answer 1 · answered Apr 21 '17 at 07:52

0

I've been told to use tables for tabular data ONLY. But this is the only way I can think of to make it work without JS. There is no need to change the div elements to table elements. It will be controlled in the CSS.

https://jsfiddle.net/xmww2koh/

Your header will become the table

.header {display: table}

And your other two containers the cells. Then put a width on the button only.

.label {display: table-cell;}
.buttonContainer {display: table-cell; width: 100px;}

This will make the label take up all the width not used by the button.

answered Apr 21 '17 at 07:52

Gezzasa

1,443
8
17

Hey, that is not exactly what I am looking for... The button width should be dynamic AND the label should only have one line and should be truncated with ellipses. Any ideas how I can achieve this? – kaljak Apr 21 '17 at 08:18
Found a solution, on another question. This has actually been asked before. It's the second answer with the upvotes. http://stackoverflow.com/questions/14826992/text-overflow-ellipsis-in-table-cell-without-width – Gezzasa Apr 21 '17 at 08:54

Sharmila · Answer 2 · 2017-04-21T13:12:55.067

Check this. I have designed using table. Hope it helps.

.label{
    background-color: yellow;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn{
  width: 75px;
}

<div class="container">   
  <table><tr>
    <td class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</td>
    <td><button class="btn">Zoom in</button></td>
  </tr></table>
  <div class="#body">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie
  </div>
</div>

Check now. I have concentrated on structure. Change the button width as per your requirement. Would it be tough? — Sharmila, Apr 21 '17 at 13:14

score 0 · Answer 3 · answered Apr 21 '17 at 08:32

0

I believe what you're trying to achieve isn't possible using only CSS. In order for text-overflow, and overflow to work they need a width.

See this snippet from CSS Tricks on how it works.

answered Apr 21 '17 at 08:32

AlxTheRed

505
6
23

score 0 · Answer 4 · answered Apr 21 '17 at 09:30

Use this CSS code, hope it will help you.

.label
{
  background-color: yellow;
  float: left;
  width:85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buttoncontainer
{
  text-align: right;
  float:right;
  width:15%;
}

score 0 · Answer 5 · answered Apr 22 '17 at 07:23

.label
{
  background-color: yellow;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float:left;
  width:85%;

}

 

.buttoncontainer
{
  text-align: right;
  float:left;
width:15%;
}

<div class="container">
  <div class="header">
    <div class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</div>
    <div class="buttoncontainer">
      <button>Zoom in</button>
    </div>
  </div>
  <div class="#body">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie
  </div>
</div>

Align div side by side with first taking the whole width that the second div doesn't need

5 Answers5