Making div and input text to occupy remaining space does not work

Question

I'm trying to make the input and its container div from the following HTML to take the remaining available width (fiddle provided):

<div id="container">
    <div id="information">
        <div id="leftcontainer"><lable>Field name:</lable></div>
        <div id="rightcontainer">
            <div id="action">A</div>
            <div id="textdiv">
                <input type="text" style="width:100%;" value="something"/>
            </div>
        </div>
    </div>
    <div id="additional">Additional info</div>
</div>

And the relevant part of the CSS:

#container, #information, #additional{
    width:600px;
}

#leftcontainer{
    float: left;
    width: 30%;    
    display:inline-block;
    position: absolute;
    top: 5%;    
}

#rightcontainer{
    float:right;
    width:67%;
    display:inline-block;
}

#action{
    float:right;
    width:40px;
    height:40px;
    text-align:center;
}

#textdiv {
    width:100%;
    height:100%;
}

This does not work properly as the input slides under the #action div and takes up the entire 67% of it's parent. I've looked and tried the solutions described here and here but the result did not improve. How can I make the input take up the available width in this situation? (Some pointers on how to "fix" the label, although not mandatory, are very much appreciated.)

I'm confused, maybe its because its early in the morning but.. What are you asking for? The input to sit next to the text and take up the remaining space on that line? — Ruddy, Nov 26 '13 at 08:02
It's definitely to early. I do apologize for the confusion. What I really need is to have the `#textdiv` and `#action` be side by side and the `#textdiv` to automatically take the remaining width in the `#rightcontainer`. — Andrei V, Nov 26 '13 at 08:13

score 1 · Answer 1 · answered Nov 26 '13 at 08:13

1

Try this by replacing your styles

#container, #information, #additional {
width: 600px;
float: left;
}

#leftcontainer {
float: left;
width: 21%;
display: inline-block;
position: absolute;
top: 5%;
}

#textdiv {
width: 89%;
height: 100%;
}

answered Nov 26 '13 at 08:13

stanze

2,456
10
13

Setting the with means that if my `#action` width changes, I need to also change the percentage. I can accomplish the same effect using fixed widths but it's not efficient. – Andrei V Nov 26 '13 at 08:17

jagdish · Answer 2 · 2013-11-26T08:58:30.077

0

Made some changes in the fiddle, is this what you wanted http://jsfiddle.net/sGg7M/4/

Made below css changes

#leftcontainer{
    float: left;
    width: 30%;   
}

#rightcontainer{
    margin-left: 30%;
}

edit: made some minor structural changes and more edit to css also removed the border http://jsfiddle.net/sGg7M/5/

edited Nov 26 '13 at 08:58

answered Nov 26 '13 at 08:16

jagdish

11
2

Thank you for your answer. Unfortunately this does not solve my main problem. I do know that removing the absolute positioning (partially) takes care of the issue, but currently that's not an option. – Andrei V Nov 26 '13 at 08:26
Why you need position absolute? Instead of top you can simply use margin-top – Ricky Stam Nov 26 '13 at 08:30
@RickyStam, figured that out in the meanwhile. Still, this does not solve my text box issue. – Andrei V Nov 26 '13 at 08:32
Did you try CSS3 rule *{box-sizing: border-box;} it might be what you need – Ricky Stam Nov 26 '13 at 08:33

Making div and input text to occupy remaining space does not work

2 Answers2