homepage Welcome to WebmasterWorld Guest from 50.17.107.233
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Width of container not page
ocon




msg:4531154
 5:04 pm on Dec 26, 2012 (gmt 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>

 

lucy24




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

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

rainborick




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

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




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


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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved