Width of container not page

[ocon]

I'm trying to get my inputs to be the full width of it's container up to 600px.

Right now it seems like the width is setting to 100% of the page.

How can I do this?

<div style="margin:0 10px">
...
<form>
<div><input type="text" style="width:100%;max-width:600px;padding:5px" /></div>
</form>
...
</div>

[lucy24]

Well, let's ask the obvious question first: What-if-anything happens when you don't set the width explicitly to 100%?

[rainborick]

The problem is that <input> is an inline element and you can't set it's width unless you set it to display:block or display:inline-block.

[Paul_o_b]

I'm trying to get my inputs to be the full width of it's container up to 600px.

Right now it seems like the width is setting to 100% of the page.

I think you are mistaken and the input is 100% the width of its container + 10px padding + 2px borders (which means it will stick out 12px from its original container). It is not 100% the width of the page.

I usually set the outer container to have 6px padding on each edge and then drag the input to the left with a negative margin-left of -6px. that means it now sits exactly in its container. (Or you could use box-sizing:border-box for modern browsers to keep the padding on the inside (http://www.w3.org/TR/css3-ui/#box-sizing))

The problem is that <input> is an inline element and you can't set it's width unless you set it to display:block or display:inline-block

No, an input is a "replaced element" and has intrinsic width and dimensions in the same way an image does and does not needs its display changed in order to honour dimensions as it behaves much like inline-block by default.