How to make a div fill a remaining horizontal space

Question

I have 2 divs  one in the left side and one in the right side of my page  The one in the left side has fixed width and I want the one of the right side to fill the remaining space    x000D   x000D   search   x000D    width  160px  x000D    height  25px  x000D    float  left  x000D    background-color   ffffff  x000D    x000D   x000D   navigation   x000D    width  780px  x000D    float  left  x000D    background-color   A53030  x000D    x000D   lt div id  search  gt Text lt  div gt  x000D   lt div id  navigation  gt Navigation lt  div gt  x000D   x000D   x000D

User · Answer

Since this is a rather popular question  I m inclined to share a nice solution using BFC  Codepen sample of the following here    left     float  left    width  100px     right     overflow  auto      In this case  overflow  auto triggers context behavior and makes the right element expand only to the available remaining width and it will naturally expand to full width if  left disappears  A highly useful and clean trick for many UI layouts  but perhaps hard to understand the  why it works  at first

User · Answer

Try adding position relative  remove width and float properties of the right side  then add left and right property with 0 value   Also  you can add margin left rule with the value is based on the left element s width    some pixels if you need space in between  to maintain its position   This example is working for me       search           width  160px          height  25px          float  left          background-color   FFF              navigation             display  block            position  relative          left  0          right  0          margin  0 0 0 166px                       background-color   A53030

User · Answer

You can use the Grid CSS properties  is the most clear  clean and intuitive way structure your boxes     x000D   x000D   container  x000D      display  grid  x000D      grid-template-columns  100px auto  x000D      color white  x000D    x000D   fixed  x000D    background  red  x000D    grid-column  1  x000D    x000D   remaining  x000D    background  green  x000D    grid-column  2  x000D    x000D   lt div id  container  gt  x000D     lt div id  fixed  gt Fixed lt  div gt  x000D     lt div id  remaining  gt Remaining lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

These days  you should use the flexbox method  may be adapted to all browsers with a browser prefix     container       display  flex      left       width  180px      right       flex-grow  1      More info  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

I ran into this same problem trying to layout some jqueryUI controls   Although the common philosophy now is  use DIV instead of TABLE   I found in my case using TABLE worked much better   In particular  if you need to have straightforward alignment within the two elements  e g   vertical centering  horizontal centering  etc   the options available with TABLE give simple  intuitive controls for this     Here s my solution    lt html gt   lt head gt     lt title gt Sample solution for fixed left  variable right layout lt  title gt     lt style type  text css  gt       controls         width  100              RightSide         background-color green           lt  style gt   lt  head gt    lt body gt   lt div id  controls  gt     lt table border  0  cellspacing  2  cellpadding  0  gt       lt TR gt         lt TD gt           lt button gt  FixedWidth          lt  button gt         lt  TD gt         lt TD width  99   ALIGN  CENTER  gt           lt div id  RightSide  gt Right lt  div gt         lt  TD gt       lt  TR gt     lt  table gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

x000D   x000D   container   x000D    width 100   x000D    display table  x000D    vertical-align middle  x000D    x000D   x000D   left   x000D    width 100   x000D    display table-cell  x000D    text-align center  x000D    x000D   x000D   right   x000D    width 40px  x000D    height 40px  x000D    display table-cell  x000D    float right  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt Left lt  div gt  x000D     lt div class  right  gt Right lt  div gt  x000D   lt  div x000D   x000D   x000D    Try this  It worked for me

User · Answer

Here is a little fix for accepted solution  which prevents right column from falling under the left column  Replaced width  100   with overflow  hidden  a tricky solution  if somebody didn t know it    lt html gt    lt head gt       lt title gt This is My Page s Title lt  title gt       lt style type  text css  gt           left               float  left              width  180px              background-color   ff0000                     right               overflow  hidden              background-color   00FF00                 lt  style gt   lt  head gt    lt body gt       lt div gt           lt div id  left  gt              left          lt  div gt           lt div id  right  gt    right      lt  div gt   lt  div gt        http   jsfiddle net MHeqG 2600    edit  Also check an example for three column layout   http   jsfiddle net MHeqG 3148

User · Answer

Boushley s answer seems to be the best way to go in order to arrange this using floats  However  it isn t without its problems  Nested floating within the expanded element will not be available to you  it will break the page   The method shown basically  fakes it  when it comes to the expanding element - it isn t actually floating  it s just playing along with the fixed-width floated elements using its margins   The problem then is exactly that  the expanding element isn t floated  If you try and have any nested floating within the expanding element  those  nested  floated items aren t really nested at all  when you try to stick a clear  both  under your  nested  floated items  you ll end up clearing the top-level floats as well   Then  to use Boushley s solution  I d like to add that you should place a div such as the following       fakeFloat              height  100          width  100          float  left        and place this directly within the expanded div  all the expanded div s contents should go then within this fakeFloat element   For this reason  I d recommend using tables in this specific case  Floated elements really aren t designed to do the expansion that you d like  whereas the solution using a table is trivial  An argument is generally made that floating is more proper for layouts  not tables   but you aren t using floating here anyways  you re faking it - and that sort of defeats the purpose of the stylistic argument for this specific case  in my humble opinion

User · Answer

Boushley s answer was the closest  however there is one problem not addressed that has been pointed out  The right div takes the entire width of the browser  the content takes the expected width  To see this problem better    lt html gt   lt head gt       lt style type  text css  gt          margin  0  padding  0        body           height  100              left           opacity  0          height  inherit          float  left          width  180px          background  green             right           height  inherit          background  orange            table               width  100               background  red             lt  style gt   lt  head gt   lt body gt       lt div id  left  gt           lt p gt Left lt  p gt       lt  div gt       lt div id  right  gt           lt table gt  lt tr gt  lt td gt Hello  World  lt  td gt  lt  tr gt  lt  table gt       lt  div gt   lt  body gt   lt  html gt    http   jsfiddle net 79hpS   The content is in the correct place  in Firefox   however  the width incorrect  When child elements start inheriting width  e g  the table with width  100   they are given a width equal to that of the browser causing them to overflow off the right of the page and create a horizontal scrollbar  in Firefox  or not float and be pushed down  in chrome    You can fix this easily by adding overflow  hidden to the right column  This gives you the correct width for both the content and the div  Furthermore  the table will receive the correct width and fill the remaining width available   I tried some of the other solutions above  they didn t work fully with certain edge cases and were just too convoluted to warrant fixing them  This works and it s simple   If there are any problems or concerns  feel free to raise them

User · Answer

css       search    position  absolute   width  100px     right-wrapper     display  table    width  100     padding-left 100px     right-wrapper  navigation    display  table-cell   background-color   A53030            html       lt div id  search  gt  lt  div gt   lt div class  right-wrapper  gt      lt div id  navigation  gt  lt  div gt   lt  div gt

User · Answer

Simplest solution is to just make the left div width equal 100  - the width of the right div plus any margin between them       lt div class  cont  gt     lt div class  search  gt      Big Logo Text    lt  div gt     lt nav gt       lt ul class  navbar  gt         lt li gt  lt a href   1  gt NavLink1 lt  a gt  lt  li gt         lt li gt  lt a href   2  gt NavLink2 lt  a gt  lt  li gt         lt li gt  lt a href   3  gt NavLink3 lt  a gt  lt  li gt         lt li gt  lt a href   4  gt NavLink4 lt  a gt  lt  li gt         lt li gt  lt a href   5  gt NavLink5 lt  a gt  lt  li gt       lt  ul gt     lt  nav gt   lt  div gt    cont    display  inline-grid    grid-template-columns  160px 10px calc 100  - 170px     grid-template-rows  auto    grid-template-areas   search    navigation     width  100     height  auto    text-align  center      search     grid-area  search    height  90px    background-color   00FF00    line-height  80px    font-size  1 4rem    font-weight  600    nav     grid-area  navigation    height  90px    background-color   A53030      navbar    display  flex    height  30px    width  100     padding  0     list-style-type  none    flex-flow  row wrap    flex  0 1 auto    justify-content  space-between    align-content  flex-start    align-items  flex-start      navbar a      outline  0      text-decoration  none      https   codepen io tamjk pen dybqKBN

User · Answer

I tried the above solutions for a liquid left  and a fixed right but non of them worked  I am aware the question is for the reverse but I think this is relevant   Here s what did work    wrapper  margin-right 150px    wrapper  left  float left  width 100   margin-right -150px     right  float right  width 150px     lt div class  wrapper  gt  lt div class  left  gt  lt  div gt  lt  div gt   lt div class  right  gt  lt  div gt

User · Answer

I had a similar issue and came up with the following which worked well  CSS    top   width  auto  height  100px  background-color  black  border  solid 2px purple  overflow  hidden     left   float left  width 100px  background-color  ff0000  padding  10px  border  solid 2px black     right   width  auto  background-color  00FF00  padding  10px  border  solid 2px orange  overflow  hidden     content   margin  auto  width  300px  min-height  300px  padding  10px  border  dotted 2px gray      HTML    lt div class top gt top  lt  div gt   lt div gt       lt div class  left  gt left  lt  div gt       lt div class  right  gt           lt div class  content  gt right  lt  div gt       lt  div gt   lt  div gt    This method won t wrap when the window is shrunk but will auto expand the  content  area  It will keep a static width for the site menu  left    And for auto expanding content box and left vertical box site menu  demo   https   jsfiddle net tidan 332a6qte

User · Answer

I wonder that no one used position  absolute with position  relative  So  another solution would be   HTML   lt header gt     lt div id  left  gt  lt input type  text  gt  lt  div gt     lt div id  right  gt Menu1 Menu2 Menu3 lt  div gt   lt  header gt    CSS  header   position  relative      left       width  160px      height  25px     right       position  absolute      top  0px      left  160px      right  0px      height  25px      Jsfiddle example

User · Answer

This seems to accomplish what you re going for    x000D   x000D   left   x000D    float left  x000D    width 180px  x000D    background-color  ff0000  x000D    x000D   right   x000D    width  100   x000D    background-color  00FF00  x000D    x000D   lt div gt  x000D     lt div id  left  gt  x000D      left x000D     lt  div gt  x000D     lt div id  right  gt  x000D      right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The easiest solution is to use margin  This will also be responsive    lt div style  margin-right  auto  gt left lt  div gt   lt div style  margin-left  auto  margin-right auto  gt center lt  div gt   lt div style  margin-left  auto  gt right lt  div gt

User · Answer

The problem that I found with Boushley s answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space  This is not the behavior I was looking for  After searching through lots of  solutions  I found a tutorial  now link is dead  on creating three column pages    The author offer s three different ways  one fixed width  one with three variable columns and one with fixed outer columns and a variable width middle  Much more elegant and effective than other examples I found  Significantly improved my understanding of CSS layout   Basically  in the simple case above  float the first column left and give it a fixed width  Then give the column on the right a left-margin that is a little wider than the first column  That s it  Done  Ala Boushley s code   Here s a demo in Stack Snippets  amp  jsFiddle   x000D   x000D   left   x000D    float  left  x000D    width  180px  x000D    x000D   x000D   right   x000D    margin-left  180px  x000D    x000D   x000D     just to highlight divs for example   x000D   left   background-color  pink    x000D   right   background-color  lightgreen   x000D   lt div id  left  gt   left   lt  div gt  x000D   lt div id  right  gt  right  lt  div gt  x000D   x000D   x000D    With Boushley s example the left column holds the other column to the right  As soon as the left column ends the right begins filling the whole space again  Here the right column simply aligns further into the page and the left column occupies it s big fat margin  No flow interactions needed

User · Answer

Use display flex   lt div style  width 500px  display flex  gt      lt div style  width 150px  height 30px  background red  gt fixed width lt  div gt       lt div style  width 100   height 30px  background green  gt remaining lt  div gt   lt  div gt

User · Answer

The solution comes from the display property   Basically you need to make the two divs act like table cells  So instead of using float left  you ll have to use display table-cell on both divs  and for the dynamic width div you need to set width auto  also  The both divs should be placed into a 100  width container with the display table property   Here is the css    container  display table width 100    search     width  160px    height  25px    display table-cell    background-color   FFF     navigation     width  auto    display table-cell      background-color  url     images transparent png         background-color   A53030      html  navigation  float left     And the HTML    lt div class  container  gt      lt div id  search  gt  lt  div gt      lt div id  navigation  gt  lt  div gt   lt  div gt    IMPORTANT For Internet Explorer you need to specify the float property on the dynamic width div  otherwise the space will not be filled   I hope that this will solve your problem   If you want  you can read the full article I wrote about this on my blog

User · Answer

If you are trying to fill remaining space in a flexbox between 2 items  add the following class to a an empty div between the 2 you want to seperate    fill        This fills the remaining space  by using flexbox     flex  1 1 auto

User · Answer

I have a very simple solution for this     HTML   lt div gt   lt div id  left  gt      left  lt  div gt   lt div id  right  gt      right  lt  div gt        CSS   left   float left  width 50   position relative  background-color red     right   position relative  background-color  00FF00     Link  http   jsfiddle net MHeqG

User · Answer

I have been working on this problem for two days and have a solution that may work for you and anyone else trying to make a responsive Fixed width left and have the right side fill in the remainder of the screen without wrapping around the left side   The intention I assume is to make the page responsive in browsers as  well as mobile devices   Here is the Code   x000D   x000D     Fix the width of the right side to cover the screen when resized x000D   thePageRefreshed   true  x000D     The delay time below is needed to insure that the resize happens after the window resize event fires x000D     In addition the show   helps   Without this delay the right div may go off screen when browser is refreshed  x000D  setTimeout function    x000D      fixRightSideWidth    x000D          right content container   show 600   x000D     50   x000D   x000D     Capture the window resize event  only fires when you resize the browser   x000D     window   resize function     x000D      fixRightSideWidth    x000D      x000D   x000D  function fixRightSideWidth    x000D       blockWrap   300     Point at which you allow the right div to drop below the top div x000D       normalRightResize      window   width   -     left navigator items   width   - 20     The -20 forces the right block to fall below the left x000D      if    normalRightResize  gt    blockWrap      thePageRefreshed    true    x000D              right content container   width   normalRightResize    x000D              right content container   css  padding-left   0px    x000D           x000D             Begin test lines these can be deleted    x000D           rightrightPosition       right content container   css  right    x000D           rightleftPosition       right content container   css  left    x000D           rightwidthPosition       right content container   css  width    x000D              top title   html  window width       window   width     amp nbsp    width     rightwidthPosition   amp nbsp    right     rightrightPosition   x000D             End test lines these can be deleted    x000D       x000D       x000D        x000D      else  x000D          if      right content container   width    gt  300    x000D                  right content container   width 300   x000D            x000D           x000D             Begin test lines these can be deleted    x000D           rightrightPosition       right content container   css  right    x000D           rightleftPosition       right content container   css  left    x000D           rightwidthPosition       right content container   css  width    x000D              top title   html  window width       window   width     amp nbsp    width     rightwidthPosition   amp nbsp    right     rightrightPosition   x000D             End test lines these can be deleted    x000D       x000D        x000D      if   thePageRefreshed    true    x000D           thePageRefreshed   false  x000D        x000D    x000D     NOTE  The html and body settings are needed for full functionality x000D  and they are ignored by jsfiddle so create this exapmle on your web site x000D     x000D  html   x000D      min-width  310px  x000D      background   333  x000D      min-height 100vh  x000D    x000D   x000D  body  x000D   background   333  x000D   background-color   333  x000D   color  white  x000D      min-height 100vh  x000D    x000D   x000D   top title  x000D    background-color  blue  x000D    text-align  center  x000D    x000D   x000D   bottom content  x000D   border  0px  x000D   height  100   x000D    x000D   x000D   left right container     x000D      position  relative  x000D      margin  0px  x000D      padding  0px  x000D      background   333  important  x000D      background-color   333  important  x000D      display inline-block  x000D      text-shadow  none  x000D      text-transform  none  x000D      letter-spacing  normal  x000D      font-size  14px  x000D      font-weight  400  x000D      font-family  -apple-system BlinkMacSystemFont  Segoe UI  Roboto Oxygen-Sans Ubuntu Cantarell  Helvetica Neue  sans-serif  x000D      border-radius  0  x000D      box-sizing  content-box  x000D      transition  none  x000D    x000D   x000D   left navigator item  x000D   display inline-block  x000D   margin-right  5px  x000D   margin-bottom  0px  important  x000D   width  100   x000D   min-height  20px  important  x000D   text-align center  important  x000D   margin  0px  x000D   padding-top  3px  x000D   padding-bottom  3px  x000D   vertical-align  top  x000D    x000D   x000D   left navigator items   x000D      float  left  x000D      width  150px  x000D    x000D   x000D   right content container  x000D      float  right  x000D      overflow  visible important  x000D      width 95      width don t matter jqoery overwrites on refresh    x000D      display none  x000D      right 0px  x000D    x000D   x000D   span text  x000D   background   eee  important  x000D   background-color   eee  important  x000D   color  black  important  x000D   padding  5px  x000D   margin  0px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  top title  gt Test Title lt  div gt  x000D   lt div class  bottom content  gt  x000D       lt div class  left right container  gt  x000D           lt div class  left navigator items  gt  x000D               lt div class  left navigator item  gt Dashboard lt  div gt  x000D               lt div class  left navigator item  gt Calendar lt  div gt  x000D               lt div class  left navigator item  gt Calendar Validator lt  div gt  x000D               lt div class  left navigator item  gt Bulletin Board Slide Editor lt  div gt  x000D               lt div class  left navigator item  gt Bulletin Board Slide Show  Live  lt  div gt  x000D               lt div class  left navigator item  gt TV Guide lt  div gt  x000D           lt  div gt  x000D           lt div class  right content container  gt  x000D               lt div class  span text  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nullam ullamcorper maximus tellus a commodo  Fusce posuere at nisi in venenatis  Sed posuere dui sapien  sit amet facilisis purus maximus sit amet  Proin luctus lectus nec rutrum accumsan  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Ut fermentum lectus consectetur sapien tempus molestie  Donec bibendum pulvinar purus  ac aliquet est commodo sit amet  Duis vel euismod mauris  eu congue ex  In vel arcu vel sem lobortis posuere  Cras in nisi nec urna blandit porta at et nunc  Morbi laoreet consectetur odio ultricies ullamcorper  Suspendisse potenti  Nulla facilisi  x000D   x000D  Quisque cursus lobortis molestie  Aliquam ut scelerisque leo  Integer sed sodales lectus  eget varius odio  Nullam nec dapibus lorem  Aenean a mattis velit  ut porta nunc  Phasellus aliquam volutpat molestie  Aliquam tristique purus neque  vitae interdum ante aliquam ut  x000D   x000D  Pellentesque quis finibus velit  Fusce ac pulvinar est  in placerat sem  Suspendisse nec nunc id nunc vestibulum hendrerit  Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos himenaeos  Mauris id lectus dapibus  tempor nunc non  bibendum nisl  Proin euismod  erat nec aliquet mollis  erat metus convallis nulla  eu tincidunt eros erat a lectus  Vivamus sed mattis neque  In vitae pellentesque mauris  Ut aliquet auctor vulputate  Duis eleifend tincidunt gravida  Sed tincidunt blandit tempor  x000D   x000D  Duis pharetra  elit id aliquam placerat  nunc arcu interdum neque  ac luctus odio felis vitae magna  Curabitur commodo finibus suscipit  Maecenas ut risus eget nisl vehicula feugiat  Sed sed bibendum justo  Curabitur in laoreet dolor  Suspendisse eget ligula ac neque ullamcorper blandit  Phasellus sit amet ultricies tellus  x000D   x000D  In fringilla  augue sed fringilla accumsan  orci eros laoreet urna  vel aliquam ex nulla in eros  Quisque aliquet nisl et scelerisque vehicula  Curabitur facilisis  nisi non maximus facilisis  augue erat gravida nunc  in tempus massa diam id dolor  Suspendisse dapibus leo vel pretium ultrices  Sed finibus dolor est  sit amet pharetra quam dapibus fermentum  Ut nec risus pharetra  convallis nisl nec  tempor nisl  Vivamus sit amet quam quis dolor dapibus maximus  Suspendisse accumsan sagittis ligula  ut ultricies nisi feugiat pretium  Cras aliquam velit eu venenatis accumsan  Integer imperdiet  eros sit amet dignissim volutpat  tortor enim varius turpis  vel viverra ante mauris at felis  Mauris sed accumsan sapien  Interdum et malesuada fames ac ante ipsum primis in faucibus  Ut vel magna commodo  facilisis turpis eu  semper mi  Nulla massa risus  bibendum a magna molestie  gravida maximus nunc  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is my fiddle that may just work for you as it did for me  https   jsfiddle net Larry Robertson 62LLjapm

User · Answer

I had a similar problem and I found the solution here  https   stackoverflow com a 16909141 3934886  The solution is for a fixed center div and liquid side columns    center      background  ddd      width  500px      float left      left      background  999      width  calc 50  - 250px       float left      right      background  999      width  calc 50  - 250px       float right      If you want a fixed left column  just change the formula accordingly

User · Answer

If you don t need compatibility with older versions of certain browsers  IE 10 8 or less for example  you can use the calc   CSS function    left      float left     width 180px     background-color  ff0000      right      float  left     width  calc 100  - 180px      background-color  00FF00

User · Answer

Rules for items and containers   Container       display  table       Items       display  table-cell  width  100          Use white-space  nowrap  for texts in last items for their undestructuring   Item X    Item Y    Item Z   Total length always   100    if  Item X 50  Item Y 10  Item z 20    then   Item X 70   Item X is dominant  first items are dominant in table CSS layout    Try max-content  property for div inside for spreading div in container   div class  item           width  -webkit-max-content    width  -moz-max-content    width  max-content

[html] How to make a div fill a remaining horizontal space?

Examples related to html

Examples related to css

Examples related to width

Examples related to responsive