Filler width of an input element inside a floating div

Question

I'm trying to organize an horizontal layout with divs of widths 40% - 30% - 30% in a container using float.

Inside each div I want to insert plain text followed by an input field that fills the horizontal rest of its div.

As a simplified reproduction of the problem, just have this on CSS:

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

And this on HTML:

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

How can I make Bbbbbb occupy all the space at the right side of its div, just like Dddddd and Ffffff?

This is what I'm expecting: Goal

I don't understand what you are looking for. Can you make a simple image of what you are expecting? — ignacioricci, Feb 28 '13 at 22:28
Aside: A de-styled unordered list is a better container than DIVs. LABEL tags are more appropriate than a DIV for your text indicators. — Diodeus - James MacFarlane, Feb 28 '13 at 22:33
@ignacioricci [This is what I'm expecting.](http://img827.imageshack.us/img827/9913/inputfill.png) — , Feb 28 '13 at 22:36
Your code already does that, I know. But aaa, ccc, eee will be a longer text with multiple lines right? You can't "fill up" space if the things you are floating don't have a width. — ignacioricci, Feb 28 '13 at 22:57

score 1 · Accepted Answer · edited May 23 '17 at 11:53

From this answer: I just wrapped the input in a div styled with overflow: hidden.

CSS:

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.filler {overflow: hidden; padding-right: 4px;}

HTML:

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div class="filler"><input class="b w100" value="Bbbbbb" /></div>
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

This is it. The perfect result!

score 0 · Answer 2 · answered Feb 28 '13 at 22:37

If the size attribute is not declared for an input, it has a default size of 20, but even that size is rendered differently in different browsers.

One solution would be to use JQuery to calculate what space you have left for the input and then dynamically add CSS to modify the width of the input.

The downside is that the input would be first rendered at the default width and then resized, possibly causing the layout to "dance". For this, you can hide the input with display: none and displaying it only after resizing.

Fico · Answer 3 · 2013-03-01T01:15:23.433

0

In your markup , wrap the input inside a div enter image description here

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div id="inp"><input class="b" value="Bbbbbb" /></div>
</div>

Set a block display to your input with this rule. The 100% width will do the rest of the job

input {
    display:block;
    width:100%;
}

You must still check some cosmetic concerning the height of your first pink div (pushed by the input) See a fsFiddle here

Fixed the height difference

with following rule modifying border and height properties.

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

Finel fiddle here

edited Mar 01 '13 at 01:15

answered Feb 28 '13 at 23:23

Fico

2,317
18
19

This almost solves it! Problem is, if you look closely, **Bbbbbb**'s field now goes through **Cccccc:**. I'd still have to subtract **Aaaaaa:**'s width from it, somehow. – Feb 28 '13 at 23:46
I am not sure about what you are talking now. Anyway I fix myself the cosmetic of the height difference and you can see it in this fiddle.http://jsfiddle.net/Fico/XNWQu/ – Fico Mar 01 '13 at 01:13

Filler width of an input element inside a floating div

3 Answers3