Make span take width up to floating buttons

Question

So in my layout i'll have a main searchbar along with two buttons.

Just below there are various entries. Which one has a clickable Title to show it's contents and open/close buttons.

Since the titles are clickable i want them to occupy all the remaining space up to the floating buttons.

I've tried adding two options to .entry_title:

.entry_title {
   display: inline;
   width: 100%;
}

But this way the title will actually occupy a whole line (thus moving the buttons to the next one). I've also tried all the other display options.

I've tried solutions to other answers (link, link) but couldn't make them work in my setup.

Try: position: relative; and display: inline-block; – Poul Bak Jul 13 '20 at 22:48 — Poul Bak, Jul 13 '20 at 22:48

score 1 · Accepted Answer · answered Jul 13 '20 at 22:50

1

Skip the floats and use flex box. Just add display:flex; to .entry-bar and flex-grow:1; to .entry-title;

.entry_bar {
  display:flex;
}

.entry_title {
    background-color: green;
    user-select: none;
    flex-grow:1;
}

answered Jul 13 '20 at 22:50

j08691

1

Both this and @jpmarks answers are good. I'm accepting this one because in this scenario i think flex boxes seem simpler. But the other grid solution given is more scalable. – Henri Augusto Jul 13 '20 at 23:07

score 1 · Answer 2 · answered Jul 13 '20 at 22:52

1

Try changing your .entry_bar css to this:

.entry_bar {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
}

I hardly recommend looking into CSS grid. Here is a great guide by css-tricks CSS -Grid Guide

answered Jul 13 '20 at 22:52

Jan-Philipp Marks

Thanks for the guide. By the way did you meant "strongly recommend" instead of "hardly recommend"? – Henri Augusto Jul 13 '20 at 23:01

score 0 · Answer 3 · answered Jul 13 '20 at 22:55

0

You can use flex-box

.entry_bar {
  display:flex;
}

.entry_title {
    flex: 1;
}

answered Jul 13 '20 at 22:55

Marik Ishtar

3 Answers3