James Willson James Willson - 1 year ago 51
CSS Question

Input box fill up available space?

I want to set the width of the fieldset of this field and then have the wrapper and input box be fluid to take up the available space.

This is how far I have got with a bit of help on here:

.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }

<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">

When I set the wrapper to 100% it stretches the whole way across, rather than the whole way across minus the width of the fieldset.

This is what I am trying to achieve for a fluid width site:

Input box fill up available space?

Answer Source


.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }​

You can adjust the width of label and input accordingly.

Demo http://jsfiddle.net/cskQ8/38/

New update

.fieldwrapper{ padding: 0 5px 0 0;
    overflow: hidden;}
label{width:200px; display:inline-block; float:left}​

Check the updated demo here