How to horizontally stack elements using CSS?


Tags: html,css

Problem :

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



Solution :

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>


    CSS Howto..

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How do I have a border-bottom on all except the last item

    How to write a structured HTML/CSS?

    How to make jQuery show() stay on page

    How do I make punch-through transparent text in HTML/CSS?

    How to properly align rows with bootstrap

    How to create CSS/JavaScript circles grid

    How does changing the display attribute in the styling of an element hide/show it?

    how to add a custom font to rails app

    How to customize HTML/CSS tooltips?

    How to add percentage-of-height top/bottom margin in CSS

    CSS: How to break images into rows?

    how to make a drop down menu fixed from the top with css?

    How to add this background-image effect to a div?

    How to indent text in a select drop down menu using PHP & CSS? [REPHRASED]

    how to many class share 1 css method in CSS

    How to make image fit in div using Jquery

    How to create and apply CSS to javascript Alert

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How to bump up text?

    When and how to use !important CSS property in a bookmarklet with cross domains?

    How to apply a CSS property to an element using it's CSS path in Javascript?

    How to Edit the CSS File of the Installed Plugin in Wordpress

    How to set gulp autoprefixer that it will be prefix css when I save my project

    how to make image in over than other like this

    My jquery slideshow is not functioning properly

    How to avoid text go below the thumbnail with css

    How to animate two divs in html / css to make a semi-circle transition?

    How to implement fade in effect for CSS checkbox

    How to debug CSS with Firebug for an element that only appears when clicked?

    ) of a table to a certain limit?