1
<div id="d1">
  <div id="d2">label</div>
  <div id="d3"><input name="t1" id="t1" type="text" /></div>
  <div id="d4">Message</div>
</div>
  • #d1 and #d2 has fixed width.
  • #d4 can be displayed or hidden (visibility: visible; or visibility: hidden;). When it's visible, it has fixed width.

I want that #d3 have a variable width, so it can fill the remaining right space of #d1 when #d4 is hidden, but when #d4 is visible, fill the space between #d2 and #d4.

How can achieve this using CSS?

Guillermo Gutiérrez
  • 17,273
  • 17
  • 89
  • 116
  • possible duplicate of [How to stretch the width of an element, so that it is (100% - widths of its siblings)?](http://stackoverflow.com/questions/3682649/how-to-stretch-the-width-of-an-element-so-that-it-is-100-widths-of-its-sibl) – Wex Oct 02 '12 at 23:38
  • @Wex - Close, but I still need the div on the right side. – Guillermo Gutiérrez Oct 02 '12 at 23:47
  • Alright, I posted [a modified version of that answer](http://stackoverflow.com/a/12701713/522877). – Wex Oct 03 '12 at 04:03

2 Answers2

2

I believe the following CSS would achieve what you're shooting for: 

#d1 {
    display: table; 
}

#d2, 
#d3, 
#d4 {
    display: table-cell; 
}

#d2, 
#d4 {
    width: (the width you want); 
}
PJ McCormick
  • 1,903
  • 14
  • 12
  • 1
    Thank you very much for your answer. I wish I could mark two answers as valid. I didn't marked this because of compatibility with IE7 and older (http://www.onenaught.com/posts/201/use-css-displaytable-for-layout), although I didn't mentioned it as a condition. – Guillermo Gutiérrez Oct 03 '12 at 14:38
1

I came up with something that slightly alters your HTML structure:

<div id="d1">
    <div id="d2">label</div>
    <div id="d4">Message</div>
    <div id="d3"><input name="t1" id="t1" type="text" /></div>
</div>

​CSS:

input { width: 100%; }
#d2 { 
    float: left; 
    display: inline-block; }
#d4 { 
    float: right;
    display: inline-block; }
#d3 { 
    padding: 0 10px; 
    overflow: hidden; }
​

Preview: http://jsfiddle.net/Wexcode/HLME4/

Wex
  • 15,539
  • 10
  • 64
  • 107
  • Thank you very much, I ended doing this way. However, it doesn't work as expected using "visibility: hidden;", but it does using "display: none;", because using the visibility property seems that the div is still there, but just not visible. Should I edit the question to mention the "display" property instead of the "visibility" property? – Guillermo Gutiérrez Oct 03 '12 at 14:46
  • Nah, I think your question is fine. – Wex Oct 03 '12 at 19:17