How can I create left & right side fixed width elements with a center that fills the remainder?


Tags: html,css3

Problem :

With pure CSS I'd like to know how to create two fixed-width elements at the container's sides with a center element that fills the remaining space, like this:

enter image description here

The "play" and "fullscreen" icons are attached to the sides of the container at a fixed width, but the center element, the red bar that scales between the two buttons, should fill the remaining space. This seems difficult.

There's a related popular question on SO that demonstrates this, except only with one fixed width element on one side:

How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

How can this be done?



Solution :

Flexible box technique is apt for the problem.

  1. Set the parent container to be the flexible box.
  2. Target the left and right elements to have a fixed width using flex: 0 0 100px
  3. Target the center element to have flexible width using flex: 1 1 auto

Learn more about the properties here: Guide to flexbox

Check the browser compatibility table: Flexbox

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-flow: row nowrap;
}
.left,
.right {
  background: lightblue;
  flex-shrink: 0;
  /* Don't shrink */
  flex-grow: 0;
  /* Don't grow */
  flex-basis: 100px;
  /* Set 100px as fixed width */
  /* flex: 1 1 auto; Short hand for above three properties */
  text-align: center;
}
.center {
  background: tomato;
  color: #fff;
  flex-shrink: 1;
  /* Shrink when resized */
  flex-grow: 1;
  /* Grow when resized */
  flex-basis: auto;
  /* Automatic width */
  /* flex: 1 1 auto; Short hand for above three properties  */
  text-align: center;
}
<div class="container">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>


    CSS Howto..

    div height is not showing properly

    How to make a new DOM element to think it resides in a different domain with js and css

    How to change Fancybox preloader image?

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to provide responsive design for svg?

    How do you modify wordpress css for posts?

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    How can I set the style of a dojo-element?

    How to align a label to the “BOTTOM” of a div in CSS?

    How can I layout a sidebar or pullquote?

    How can i put two divs and one nav into the header at the top-left, top-center and top- right with css

    How to align content to the bottom of a div?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How to move a table(or other content) next to vertical navigation bar

    How do I have fieldset::before rule account for the legend?

    Css Drop down menu, how to keep menu infront of content

    How to get CSS to E-Mails back in Magento 1.9.1

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to combine transforms in CSS?

    How to put those things next to eachother? CSS

    How to set hover of the block which contains icon with HTML or CSS?

    How to center this popup text box

    CSS: How to place next to each other 2 images with 50 % width?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to trim off Image in CSS?

    How to make a floating page div responsive

    I would like to know how can i do tab spaces after a word so that the pattern that comes after that would be align with each other

    How to set the default font in Google Closure Library rich text editor

    How to reverse this CSS spin animation

    how to relate to a relative css of master page?