Make a div fill up the remaining width

Question

How can I make a div fill up the remaining width    lt div id  Main  style  width  500px   gt       lt div id  div1  style  width  100px   gt  lt  div gt       lt div id  div2  gt  lt  div gt       lt div id  div3  style  width  100px  float  right   gt  lt  div gt   lt  div gt    How can I get div2 to fill up the remainder

User · Answer

Flex-boxes are the solution - and they re fantastic  I ve been wanting something like this out of css for a decade  All you need is to add display  flex to your style for  Main  and flex-grow  100  where 100 is arbitrary - its not important that it be exactly 100   Try adding this style  colors added to make the effect visible     lt style gt       Main           background-color  lightgray          display  flex              div1           border  1px solid green             height  50px           display  inline-flex              div2           border  1px solid blue              height  50px          display  inline-flex          flex-grow  100             div3           border  1px solid orange                  height  50px          display  inline-flex         lt  style gt    More info about flex boxes here  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

I was looking for a solution to the opposite problem where I needed a fixed width div in the centre and a fluid width div on either side  so I came up with the following and thought I d post it here in case anyone needs it    x000D   x000D   wrapper   x000D    clear  both  x000D    width  100   x000D    x000D   x000D   wrapper div   x000D    display  inline-block  x000D    height  500px  x000D    x000D   x000D   center   x000D    background-color  green  x000D    margin  0 auto  x000D    overflow  auto  x000D    width  500px  x000D    x000D   x000D   left   x000D    float  left  x000D    x000D   x000D   right   x000D    float  right  x000D    x000D   x000D   fluid   x000D    background-color  yellow  x000D    width  calc 50  - 250px   x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  center  gt  x000D      This is fixed width in the centre x000D     lt  div gt  x000D     lt div id  left  class  fluid  gt  x000D      This is fluid width on the left x000D     lt  div gt  x000D     lt div id  right  class  fluid  gt  x000D      This is fluid width on the right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you change the width of the  center element then you need to update the width property of  fluid to   width  calc 50  -  half of center width px

User · Answer

Although a bit late in posting an answer  here is an alternative approach without using margins    lt style gt       divMain   width  500px         div1   width  100px  float  left  background-color   fcc         div2   overflow hidden  background-color   cfc         div3   width  100px  float  right  background-color   ccf     lt  style gt    lt div id  divMain  gt       lt div id  div1  gt          div 1      lt  div gt       lt div id  div3  gt          div 3      lt  div gt       lt div id  div2  gt          div 2 lt br   gt bit taller      lt  div gt   lt  div gt    This method works like magic  but here is an explanation      Fiddle with a similar sample here

User · Answer

The Div that has to take the remaining space has to be a class   The other divs can be id s  but they must have width   CSS   main center       width 1000px      height 100px      padding 0px 0px      margin 0px auto      display block     left       width 200px      height 100px      padding 0px 0px      margin 0px auto      background  c6f5c6      float left     right       height 100px      padding 0px 0px      margin 0px auto      overflow hidden      background  000fff     clear       clear both     HTML   lt body gt       lt div id  quot main center quot  gt           lt div id  quot left quot  gt  lt  div gt           lt div class  quot right quot  gt  lt  div gt           lt div class  quot clear quot  gt  lt  div gt       lt  div gt   lt  body gt   The following link has the code in action  which should solve the remaining area coverage issue  jsFiddle

User · Answer

Up-to-date solution  October 2014    ready for fluid layouts    Introduction   This solution is even simpler than the one provided by Leigh  It is actually based on it   Here you can notice that the middle element  in our case  with  content  middle  class  does not have any dimensional property specified - no width  nor padding  nor margin related property at all - but only an overflow  auto   see note 1    The great advantage is that now you can specify a max-width and a min-width to your left  amp  right elements  Which is fantastic for fluid layouts   hence responsive layout  -   note 1  versus Leigh s answer where you need to add the margin-left  amp  margin-right properties to the  content  middle  class      Code with non-fluid layout   Here the left  amp  right elements  with classes  content  left  and  content  right   have a fixed width  in pixels   hence called non-fluid layout   Live Demo on http   jsbin com qukocefudusu 1 edit html css output   lt style gt                 1   amp   3   floats  makes the 2 divs align themselves respectively right  amp  left         2   overflow  auto   makes this div take the remaining width              content           width  100              content  left           width  100px          float  left      1             background-color   fcc             content  middle           background-color   cfc          overflow  auto      2                content  right           width  100px          float  right      3             background-color   ccf         lt  style gt    lt div class  content  gt       lt div class  content  left  gt          left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt       lt  div gt       lt div class  content  right  gt          right div lt br  gt right div lt br  gt right div lt br  gt right div lt br  gt       lt  div gt       lt div class  content  middle  gt          middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br   gt bit taller      lt  div gt   lt  div gt      Code with fluid layout   Here the left  amp  right elements  with classes  content  left  and  content  right   have a variable width  in percentages  but also a minimum and maximum width  hence called fluid layout   Live Demo in a fluid layout with the max-width properties http   jsbin com runahoremuwu 1 edit html css output   lt style gt                 1   amp   3   floats  makes the 2 divs align themselves respectively right  amp  left         2   overflow  auto   makes this div take the remaining width              content            width  100               content  left            width  20            max-width  170px            min-width  40px            float  left      1             background-color   fcc               content  middle            background-color   cfc           overflow  auto      2                content  right            width  20            max-width  250px           min-width  80px           float  right      3             background-color   ccf          lt  style gt    lt div class  content  gt       lt div class  content  left  gt          max-width of 170px  amp  min-width of 40px lt br   gt left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt left div lt br  gt       lt  div gt       lt div class  content  right  gt          max-width of 250px  amp  min-width of 80px lt br   gt right div lt br  gt right div lt br  gt right div lt br  gt right div lt br  gt       lt  div gt       lt div class  content  middle  gt          middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br  gt middle div lt br   gt bit taller      lt  div gt   lt  div gt      Browser Support  Tested on BrowserStack com on the following web browsers    IE7 to IE11  Ff 20  Ff 28 Safari 4 0  windows XP   Safari 5 1  windows XP  Chrome 20  Chrome 25  Chrome 30  Chrome 33  Opera 20

User · Answer

Use the CSS Flexbox flex-grow property to achieve this   x000D   x000D   main     display  flex     col-1   col-3     width  100px     col-2     flex-grow  1    x000D   lt div class  main  gt     lt div class  col-1  style  background   fc9   gt Left column lt  div gt     lt div class  col-2  style  background   eee   gt Middle column lt  div gt     lt div class  col-3  style  background   fc9   gt Right column lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Try out something like this    lt style gt       divMain   width  500px         left-div   width  100px  float  left  background-color   fcc         middle-div   margin-left  100px  margin-right  100px  background-color   cfc         right-div   width  100px  float  right  background-color   ccf     lt  style gt    lt div id  divMain  gt       lt div id  left-div  gt          left div      lt  div gt       lt div id  right-div  gt          right div      lt  div gt       lt div id  middle-div  gt          middle div lt br   gt bit taller      lt  div gt   lt  div gt    divs will naturally take up 100  width of their container  there is no need to explicitly set this width  By adding a left right margin the same as the two side divs  it s own contents is forced to sit between them   Note that the  middle div  goes after the  right div  in the HTML

[html] Make a div fill up the remaining width

Examples related to html

Examples related to css