Welcome to WebmasterWorld Guest from 54.234.63.187

Forum Moderators: not2easy

Message Too Old, No Replies

Width of container not page

     

ocon

5:04 pm on Dec 26, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



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

8:44 pm on Dec 26, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

rainborick

10:15 pm on Dec 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

4:12 pm on Dec 27, 2012 (gmt 0)

10+ Year Member




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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month