Home/ Questions/Q 8620445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:34:55+00:00

<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

  • 0
<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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0