How to horizontally stack elements using CSS? - html

Question

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:
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 1

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>

Answer 2

change this css class to use inline style...
.player .group .button,
.player .group2 .button
{
display: inline;
width:24px;
height:24px;
background-color:#444444;
}

Answer 3

DEMO
It is actually pretty simple with flex box
<div class="player">
<div class="button"></div>
<div class="seek">
<div></div>
</div>
<div class="button"></div>
<div class="button"></div>
</div>
CSS
.player{
height: 35px;
background-color: #555;
display: flex;
}
.player>.button{
width: 35px;
}
.player>.seek{
padding: 10px;
flex-grow: 1;
}
.player>.seek>div{
background-color: #0af;
height: 100%;
}