Expand a div to fill the remaining width

Question

I want a two-column div layout  where each one can have variable width e g    x000D   x000D  div   x000D    float  left  x000D    x000D   x000D   second   x000D    background   ccc  x000D    x000D   lt div gt Tree lt  div gt  x000D   lt div class  second  gt View lt  div gt  x000D   x000D   x000D    I want the  view  div to expand to the whole width available after  tree  div has filled needed space   Currently  my  view  div is resized to content it contains It will also be good if both divs take up the whole height     Not duplicate disclaimer    Expand div to max width when float left is set because there the left one has a fixed width  Help with div - make div fit the remaining width because I need two columns both aligned to left

User · Answer

You can try CSS Grid Layout    x000D   x000D  dl   x000D    display  grid  x000D    grid-template-columns  max-content auto  x000D    x000D   x000D  dt   x000D    grid-column  1  x000D    x000D   x000D  dd   x000D    grid-column  2  x000D    margin  0  x000D    background-color   ccc  x000D    x000D   lt dl gt  x000D     lt dt gt lorem ipsum lt  dt gt  x000D     lt dd gt dolor sit amet lt  dd gt  x000D     lt dt gt carpe lt  dt gt  x000D     lt dd gt diem lt  dd gt  x000D   lt  dl gt  x000D   x000D   x000D

User · Answer

Check this solution out   x000D   x000D   container   x000D    width  100   x000D    height  200px  x000D    background-color  green  x000D    x000D   sidebar   x000D    float  left  x000D    width  200px  x000D    height  200px  x000D    background-color  yellow  x000D    x000D   content   x000D    background-color  red  x000D    height  200px  x000D    width  auto  x000D    margin-left  200px  x000D    x000D   item   x000D    width  25   x000D    background-color  blue  x000D    float  left  x000D    color  white  x000D    x000D   clearfix   x000D    clear  both  x000D    x000D   lt div class  container  gt  x000D     lt div class  clearfix  gt  lt  div gt  x000D     lt div class  sidebar  gt width  200px lt  div gt  x000D   x000D     lt div class  content  gt  x000D       lt div class  item  gt 25  lt  div gt  x000D       lt div class  item  gt 25  lt  div gt  x000D       lt div class  item  gt 25  lt  div gt  x000D       lt div class  item  gt 25  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If the width of the other column is fixed, how about using the calc CSS function working for all common browsers:

width: calc(100% - 20px) /* 20px being the first column's width */

This way the width of the second row will be calculated (i.e. remaining width) and applied responsively.

User · Answer

Here  this might help      x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt style type  text css  gt  x000D      div box   x000D        background   EEE  x000D        height  100px  x000D        width  500px  x000D        x000D      div left   x000D        background   999  x000D        float  left  x000D        height  100   x000D        width  auto  x000D        x000D      div right   x000D        background   666  x000D        height  100   x000D        x000D      div clear   x000D        clear  both  x000D        height  1px  x000D        overflow  hidden  x000D        font-size  0pt  x000D        margin-top  -1px  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  box  gt  x000D       lt div class  left  gt Tree lt  div gt  x000D       lt div class  right  gt View lt  div gt  x000D       lt div class  clear    gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I wrote a javascript function that I call from jQuery $(document).ready(). This will parse all children of the parent div and only update the right most child.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

User · Answer

I don t understand why people are willing to work so hard to find a pure-CSS solution for simple columnar layouts that are SO EASY using the old TABLE tag   All Browsers still have the table layout logic    Call me a dinosaur perhaps  but I say let it help you    x000D   x000D   lt table WIDTH 100  border 0 cellspacing 0 cellpadding 2 gt  x000D     lt tr gt  x000D       lt td WIDTH  1  NOWRAP bgcolor   E0E0E0  gt Tree lt  td gt  x000D       lt td bgcolor   F0F0F0  gt View lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Much less risky in terms of cross-browser compatibility too

User · Answer

If both of the widths are variable length why don't you calculate the width with some scripting or server side?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

User · Answer

x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt style type  text css  gt  x000D      div box   x000D        background   EEE  x000D        height  100px  x000D        width  500px  x000D        x000D      div left   x000D        background   999  x000D        float  left  x000D        height  100   x000D        width  auto  x000D        x000D      div right   x000D        background   666  x000D        height  100   x000D        x000D      div clear   x000D        clear  both  x000D        height  1px  x000D        overflow  hidden  x000D        font-size  0pt  x000D        margin-top  -1px  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  box  gt  x000D       lt div class  left  gt Tree lt  div gt  x000D       lt div class  right  gt View lt  div gt  x000D       lt div class  right  gt View lt  div gt  x000D       lt div style  width   lt  100  getTreeWidth  100   gt   gt Tree lt  div gt  x000D       lt div class  clear    gt  x000D     lt  div gt  x000D     lt div class  ColumnWrapper  gt  x000D       lt div class  Colum  nOne  Half  gt Tree lt  div gt  x000D       lt div class  Colum  nOne  Half  gt View lt  div gt  x000D     lt  div gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Pat - You are right  That s why this solution would satisfy both  dinosaurs  and contemporaries       x000D   x000D   btnCont   x000D    display  table-layout  x000D    width  500px  x000D    x000D   x000D   txtCont   x000D    display  table-cell  x000D    width  70   x000D    max-width  80   x000D    min-width  20   x000D    x000D   x000D   subCont   x000D    display  table-cell  x000D    width  30   x000D    max-width  80   x000D    min-width  20   x000D    x000D   lt div class  btnCont  gt  x000D     lt div class  txtCont  gt  x000D      Long text that will auto adjust as it grows  The best part is that the width of the container would not go beyond 500px  x000D     lt  div gt  x000D     lt div class  subCont  gt  x000D      This column as well as the entire container works like a table  Isn t Amazing    x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use W3 s CSS library that contains a class called rest that does just that    x000D   x000D   lt link rel  stylesheet  href  https   www w3schools com w3css 4 w3 css  gt  x000D   x000D   lt div class  w3-row  gt  x000D     lt div class  w3-col   style  width 150px  gt  x000D       lt p gt 150px lt  p gt  x000D     lt  div gt  x000D     lt div class  w3-rest w3-green  gt  x000D       lt p gt w3-rest lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Don t forget to link the CSS library in the page s header    lt link rel  stylesheet  href  https   www w3schools com w3css 4 w3 css  gt    Here s the official demo  W3 School Tryit Editor

User · Answer

flex-grow - This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). See more here

_x000D_

.parent {_x000D_
  display: flex;_x000D_
}_x000D_
_x000D_
.child {_x000D_
  flex-grow: 1; // It accepts a unitless value that serves as a proportion_x000D_
}_x000D_
_x000D_
.left {_x000D_
  background: red;_x000D_
}_x000D_
_x000D_
.right {_x000D_
  background: green;_x000D_
}

_x000D_

<div class="parent"> _x000D_
  <div class="child left">_x000D_
      Left 50%_x000D_
  </div>_x000D_
   <div class="child right">_x000D_
      Right 50%_x000D_
  </div>_x000D_
</div>

_x000D_

User · Answer

Use calc    x000D   x000D   leftSide   x000D    float  left  x000D    width  50px  x000D    background-color  green  x000D    x000D   rightSide   x000D    float  left  x000D    width  calc 100  - 50px   x000D    background-color  red  x000D    x000D   lt div style  width 200px  gt  x000D     lt div class  leftSide  gt a lt  div gt  x000D     lt div class  rightSide  gt b lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The problem with this is that all widths must be explicitly defined  either as a value px and em work fine   or as a percent of something explicitly defined itself

User · Answer

A slightly different implementation    Two div panels content extra   side by side  content panel expands if extra panel is not present   jsfiddle   http   jsfiddle net qLTMf 1722

User · Answer

This is fairly easy using flexbox  See the snippet below  I ve added a wrapper container to control flow and set a global height  Borders have been added as well to identify the elements  Notice that divs now expand to the full height as well  as required  Vendor prefixes should be used for flexbox in a real world scenario since is not yet fully supported   I ve developed a free tool to understand and design layouts using flexbox  Check it out here  http   algid com Flex-Designer   x000D   x000D   container  x000D      height 180px  x000D      border 3px solid  00f  x000D      display flex  x000D      align-items stretch  x000D    x000D  div   x000D      display flex  x000D      border 3px solid  0f0  x000D    x000D   second   x000D      display flex  x000D      flex-grow 1  x000D      border 3px solid  f00  x000D    x000D   lt div class  container  gt  x000D       lt div gt Tree lt  div gt  x000D       lt div class  second  gt View lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Have a look at the available CSS layout frameworks. I would recommend Simpl or, the slightly more complex, Blueprint framework.

If you are using Simpl (which involves importing just one simpl.css file), you can do this:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, for a 50-50 layout, or :

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

, for a 25-75 one.

It's that simple.

User · Answer

This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.

If both the columns were fixed width, this would be easy.

If one of the columns was fixed width, this would be slightly harder but entirely doable.

With both columns variable width, IMHO you need to just use a two-column table.

User · Answer

Im not sure if this is the answer you are expecting but  why don t you set the width of Tree to  auto  and width of  View  to 100

User · Answer

I just discovered the magic of flex boxes (display: flex). Try this:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex boxes give me the control I've wished css had for 15 years. Its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

User · Answer

Use the CSS Flexbox flex-grow property to achieve this   x000D   x000D  html  body     height  100     body     display  flex     second     flex-grow  1    x000D   lt div style  background   bef   gt Tree lt  div gt   lt div class  second  style  background   ff9   gt View lt  div gt  x000D   x000D   x000D

User · Answer

Thanks for the plug of Simpl css   remember to wrap all your columns in ColumnWrapper like so    lt div class  ColumnWrapper  gt       lt div class  Colum  nOne  Half  gt Tree lt  div gt       lt div class  Colum  nOne  Half  gt View lt  div gt   lt  div gt    I am about to release version 1 0 of Simpl css so help spread the word

User · Answer

The solution to this is actually very easy  but not at all obvious   You have to trigger something called a  block formatting context   BFC   which interacts with floats in a specific way   Just take that second div  remove the float  and give it overflow hidden instead   Any overflow value other than visible makes the block it s set on become a BFC   BFCs don t allow descendant floats to escape them  nor do they allow sibling ancestor floats to intrude into them   The net effect here is that the floated div will do its thing  then the second div will be an ordinary block  taking up all available width except that occupied by the float   This should work across all current browsers  though you may have to trigger hasLayout in IE6 and 7   I can t recall   Demos    Fixed Left  http   jsfiddle net A8zLY 5  Fixed Right  http   jsfiddle net A8zLY 2

[html] Expand a div to fill the remaining width

The answer is

Examples related to html

Examples related to css

Examples related to multiple-columns

Tags