dooxe dooxe - 4 months ago 7
CSS Question

How to horizontally stack elements using CSS?

I want to create a custom audio player, with basically:


  • a button for playing

  • a flexible bar, i.e., that adapts itself to the player width

  • a group of button at the right of the player, namely for the download button etc



For the two first parts I have no problem (see the fiddle), but it's for the second button group I have troubles.

I tried to put the group with
float:right
, but in this case it is kicked out from the player. Then I tried to put the
flexible
bar with a floating property, but in this case I have to specify its width and it becomes no more flexible.

Here is a sample image of what I want to achieve:
enter image description here

Here is what I have so far:

HTML:

<div class="player" style="width:500px">
<div class="group">
<a class="button" href="#"></a>
</div>
<div class="flexible">
<div class="bar"></div>
</div>
<div class="clear"></div>
</div>


CSS:

.player
{
height:24px;
background-color: #222222;
}

.player .group
{
float:left;
}

.player .group .button,
.player .group2 .button
{
display: inline-block;
width:24px;
height:24px;
background-color:#444444;
}

.player .group2
{
float:right;
}

.player .flexible
{
box-sizing:border-box;
overflow:hidden;
}

.player .flexible .bar
{
margin : 8px;
height : 8px;
background-color:#225599;
}


JSFiddle:
https://jsfiddle.net/grh7sahq/3/

Do you have any advice ?

Thanks

Answer

I understood you wanted the central part to be flexible. You can use display: flex. Really basic CSS to show it:

.player{
  background: black;
  height: 100px;
  display: flex;
}

.button{
  background: blue;
  height: 100px;
  width: 24px;
  display: block;
}

.flexible{
  flex: 1;
}
<div class="player" style="width:500px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>
<br/>

<div class="player" style="width:150px">
  <div class="group">
    <a class="button" href="#"></a> 
  </div>
  <div class="flexible">
    <div class="bar"></div>
  </div>
  <div class="group2">
    <a class="button" href="#"></a>
  </div>
</div>