Auto-sizing nested divs

Question

If you look at the code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>

<style type="text/css">

    #div1 {  border:1px solid red; overflow:hidden;  }
    #div1 ul {  list-style-type:none; margin:0; padding:0;  }
    #div1 li {  display:inline; float:left;  }
    #div2 {  background-color:pink; width:100%; height:40px;  }
    #div3 {  background-color:yellow; width:40px; height:40px;  }

</style>

<div id="div1">
<ul>
   <li><div id="div2">div2</div3></li>
   <li><div id="div3">div3</div3></li>
</ul>
</div>

</body>
</html>

I'm trying to get DIV2 to take up the remaining width of the parent div, once the 40px width of DIV3 has been assigned.

Is this possible?

http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line see if that helps. http://jsfiddle.net/qx32C/36/ — Timmerz, Feb 04 '15 at 03:08

score 1 · Accepted Answer · answered Feb 04 '15 at 03:08

My suggestion would be to use display:table and display:table-cell on the ul and li respectively, rather than float and display:inline. To make life easier, i have moved the id's to the li elements rather than the divs

html

<div id="div1">
<ul>
   <li id="div2"><div>div2</div></li>
   <li id="div3"><div>div3</div></li>
</ul>
</div>

CSS

#div1 {  border:1px solid red; overflow:hidden;  }
#div1 ul {  list-style-type:none; margin:0; padding:0; display:table; width:100%;  }
#div1 li {  display:table-cell;  }
#div2 {  background-color:pink; width:100%; height:40px;  }
#div3 {  background-color:yellow; width:40px; height:40px;  }

JS FIDDLE

score 0 · Answer 2 · answered Feb 04 '15 at 03:18

A block-level element--like <div> or <li> or anything with display:block--will automatically absorb the available width. Something like this should work:

#div1 {
  border: 1px solid red;
  overflow: hidden;
}
#div2 {
  background-color: pink;
  height: 40px;
}
#div3 {
  background-color: yellow;
  float: right;
  width: 40px;
  height: 40px;
}

<div id="div1">
  <div id="div3">div3</div>
  <div id="div2">div2</div>
</div>

Note that the floated content will need to be placed first in order for this approach to work.

Auto-sizing nested divs

2 Answers2