Welcome to WebmasterWorld Guest from 54.196.217.43

Forum Moderators: not2easy

Message Too Old, No Replies

Width of container not page

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

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:222
votes: 0


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>
8:44 pm on Dec 26, 2012 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12700
votes: 244


Well, let's ask the obvious question first: What-if-anything happens when you don't set the width explicitly to 100%?
10:15 pm on Dec 26, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


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.
4:12 pm on Dec 27, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4



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.