How to make an inline-block element fill the remainder of the line

Question

Is such a thing possible using CSS and two inline-block  or whatever  DIV tags instead of using a table   The table version is this  borders added so you can see it     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt  lt  head gt   lt body gt   lt table style  width 100    gt   lt tr gt   lt td style  border 1px solid black width 100px height 10px   gt  lt  td gt   lt td style  border 1px solid black height 10px   gt  lt  td gt   lt  tr gt   lt  table gt   lt  body gt   lt  html gt    It produces a left column with a FIXED WIDTH  not a percentage width   and a right column that expands to fill THE REMAINING SPACE on the line   Sounds pretty simple  right   Furthermore  since nothing is  floated   the parent container s height properly expands to encompass the height of the content   --BEGIN RANT-- I ve seen the  clear fix  and  holy grail  implementations for multi-column layouts with fixed-width side column  and they suck and they re complicated   They reverse the order of elements  they use percentage widths  or they use floats  negative margins  and the relationship between the  left    right   and  margin  attributes are complex   Furthermore  the layouts are sub-pixel sensitive so that adding even a single pixel of borders  padding  or margins will break the whole layout  and send entire columns wrapping to the next line   For example  rounding errors are a problem even if you try to do something simple  like put 4 elements on a line  with each one s width set to 25   --END RANT--  I ve tried using  inline-block  and  white-space nowrap    but the problem is I just can t get the 2nd element to fill the remaining space on the line   Setting the width to something like  width 100 - LeftColumWidth px  will work in some cases  but performing a calculation in a width property is not really supported

User · Answer

If you can t use overflow  hidden  because you don t want overflow  hidden  or if you dislike CSS hacks workarounds  you could use JavaScript instead  Note that it may not work as well because it s JavaScript    x000D   x000D  var parent   document getElementsByClassName  lineContainer   0   x000D  var left   document getElementsByClassName  left   0   x000D  var right   document getElementsByClassName  right   0   x000D  right style width    parent offsetWidth - left offsetWidth     px   x000D  window onresize   function     x000D    right style width    parent offsetWidth - left offsetWidth     px   x000D    x000D   lineContainer   x000D    width  100  border  1px solid  000  x000D    font-size  0px  x000D       You need to do this because inline block puts an invisible space between them and they won t fit on the same line    x000D    x000D   x000D   lineContainer div   x000D    height  10px  x000D    display  inline-block  x000D    x000D   x000D   left   x000D    width  100px  x000D    background  red x000D    x000D   x000D   right   x000D    background  blue x000D    x000D   lt div class  lineContainer  gt  x000D     lt div class  left  gt  lt  div gt  x000D     lt div class  right  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net ys2eogxm

User · Answer

A modern solution using flexbox    x000D   x000D   container   x000D      display  flex  x000D    x000D   container  gt  div   x000D      border  1px solid black  x000D      height  10px  x000D    x000D   x000D   left   x000D     width  100px  x000D    x000D   x000D   right   x000D      width  100   x000D      background-color  ddd  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  lt  div gt  x000D     lt div class  right  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net m5Xz2 100

User · Answer

You can use calc  100  - 100px  on the fluid element  along with display inline-block for both elements    Be aware that there should not be any space between the tags  otherwise you will have to consider that space in your calc too    left      display inline-block      width 100px     right      display inline-block      width calc 100  - 100px        lt div class    left    gt  lt  div gt  lt div class    right    gt  lt  div gt    Quick example  http   jsfiddle net dw689mt4 1

User · Answer

Compatible with common modern browers  IE 8    http   jsfiddle net m5Xz2 3    x000D   x000D   lineContainer   x000D      display table  x000D      border-collapse collapse  x000D      width 100   x000D    x000D   lineContainer div   x000D      display table-cell  x000D      border 1px solid black  x000D      height 10px  x000D    x000D   left   x000D      width 100px  x000D    x000D    lt div class  lineContainer  gt  x000D       lt div class  left  gt left lt  div gt  x000D       lt div class  right  gt right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

When you give up the inline blocks   post-container       border  5px solid  333      overflow auto     post-thumb       float  left      display block      background  ccc      width 200px      height 200px     post-content      display block      overflow hidden      http   jsfiddle net RXrvZ 3731    from CSS Float  Floating an image to the left of the text

User · Answer

I ve used flex-grow property to achieve this goal  You ll have to set display  flex for parent container  then you need to set flex-grow  1 for the block you want to fill remaining space  or just flex  1 as tanius mentioned in the comments

User · Answer

See  http   jsfiddle net qx32C 36    x000D   x000D   lineContainer   x000D      overflow  hidden     clear the float    x000D      border  1px solid  000 x000D    x000D   lineContainer div   x000D      height  20px x000D     x000D   left   x000D      width  100px  x000D      float  left  x000D      border-right  1px solid  000 x000D    x000D   right   x000D      overflow  hidden  x000D      background   ccc x000D    x000D   lt div class  lineContainer  gt  x000D       lt div class  left  gt left lt  div gt  x000D       lt div class  right  gt right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Why did I replace margin-left  100px with overflow  hidden on  right   EDIT  Here are two mirrors for the above  dead  link      archive is   web archive org https   colinaarts-com herokuapp com  making-room-for-floats articles the-magic-of-overflow-hidden

[css] How to make an inline-block element fill the remainder of the line?

Examples related to css

Examples related to layout

Examples related to fixed-width