0

I've been thinking about this problem and can't seem to find the ideal solution.

Let's say I have a div tag with flexible width. In that div, I have 2 more divs, one next to the other either using float, absolute position or any other attribute that will work. The first div has a fixed width, say 100px. The second div must take 100% of whatever horizontal space is left.

I tried having both float left, first div width: 100px second div position: absolute, left: 100px, width: 100% but the second div would be too long and have 100px extra width. It would be nice if css allows something like width: 100%-100px.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
BringMeAnother
  • 607
  • 2
  • 10
  • 18
  • Let's say you posted your code and then we say that someone could help you. – PiLHA Jun 14 '13 at 13:49
  • Here you go: http://stackoverflow.com/questions/6809079/two-divs-side-by-side-one-100-width-others-width-depended-on-content/6809143#6809143. There's also the margin approach, which works fine provided that the width of the left `div` is fixed: http://stackoverflow.com/questions/7718761/placing-div-on-same-line-as-image/7718824#7718824 – thirtydot Jun 14 '13 at 13:52

2 Answers2

3

You can with css3

width: calc(100% - 100px);

Edit: here you can see the browser support http://caniuse.com/calc

koningdavid
  • 7,903
  • 7
  • 35
  • 46
0

You may want to see: Expand a div to take the remaining width

It explains a concept called as "block formatting context" ..you can have a fixed block on either left or right of your "expanding" div

Community
  • 1
  • 1
Jags
  • 1,466
  • 1
  • 18
  • 33