Middle box centered variable width, left and right float directly attached

Question

I'm designing my own Anki-Flashcards for learning Japanese:

I have three boxes of variable size in a line. The middle one should be centered and has a variable width. The boxes left and right shall be attached to the middle box. The three boxes as a group shall NOT be centered. I do NOT want them all the same size, neither the middle with a fixed size. I can not use JavaScript in the environment I am using.

If necessary I can fix the width of the right box (its an icon), but the left and middle box are variable.

I can achieve this using only the middle box and right box (see Fiddle), but not additionally with the left box. Or I can move the outer boxes to the edges (and not towards the middle box), like here [1], but thats not what I want. Flexbox also does not what I want, see [2]. Also, this [3] requires the boxes to be the same size.

HTML:

<div class="card">
 <span class="left">
  Note (e.g. uncommon): 
 </span>
 <span class="middle">
  Alt JP Pronounciation
 </span>
 <span class="right">
  Alt audio button
 </span>
</div>

CSS:

.left {
 position: absolute;
}
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

I want the "note" line behaving like the "Japanese Pronounciation" line (see Fiddle), just attaching the note-part left.

EDIT: It seems its not yet clear what I want, so I try to ASCII-Art it:

        [Left (this also asdf)][Middle (this might be long)][Right]
           ^attached to middle        ^centered                ^attached to middle
        |   complete line is not centered, just the middle part   |

This probably comes closest - https://stackoverflow.com/questions/55393088/align-3-unequal-blocks-left-center-and-right — Paulie_D, Jul 04 '19 at 15:42
Thanks, that actually solved my problem, just had to change the alignments :) — Millah, Jul 05 '19 at 07:51

score 0 · Accepted Answer · answered Jul 05 '19 at 07:56

Thanks to Paulie_D and the Topic here, I came up with a solution:

HTML:

<div class="card">
 <div class="container">

  <span class="left">
   Note (e.g. uncommon): 
  </span>
  <span class="middle">
   Alt JP Pronounciation
  </span>
  <span class="right">
   Alt audio button
  </span>
 </div>
</div>

CSS:

.right {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: left;
}

.left {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: right;
}

.middle {
 border: 1px solid;
}

.container {
 display: flex;
}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

score -1 · Answer 2 · edited Jul 05 '19 at 07:01

-1

.right {
  float:left;
  border: 1px solid;
}
.middle {
  margin-left:3px;
  float:left;
  border: 1px solid;
}

edited Jul 05 '19 at 07:01

barbsan

3,418
11
21
28

answered Jul 04 '19 at 18:08

Harsh Joshi

1
2

This answer was automatically tagged "low quality". As explained in the [help](https://stackoverflow.com/help/how-to-answer) ("Brevity is acceptable, but fuller explanations are better."), please edit your answer to tell the OP what he's doing wrong, how you reasoned and what your code is about, to show that you understood the question and to make benefit both the OP and future visitors. – Sandra Rossi Jul 05 '19 at 06:52
@SandraRossi new users cannot comment, they need 50rep. That's why the template comment from review says *"Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker.”* – barbsan Jul 05 '19 at 06:59

Middle box centered variable width, left and right float directly attached

2 Answers2

Linked

Related