homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

input and div width rendering

5+ Year Member

Msg#: 3863975 posted 2:27 am on Mar 6, 2009 (gmt 0)

so it had always bothered me that you can't make an input field width: 100% if it had borders or padding. but then it occurred to me that browsers can properly render div widths and they can have padding and borders. i figured if i gave my input fields the same properties as a div it would render the same.

(it should be noted i've been playing around in the inspector part of google chrome and learned a lot about how browsers calculate widths. for example i learned that divs are width: auto not width: 100%. if you give a div a width of 100% it will have the same problem with adding paddings and borders. chrome adds up the width of your left margin, borders, and padding and gives the right margin a negative of that value.)

so i set my css

input[type=text] {
display: block;
margin: 0px;
width: auto;

i put margin before width because i want my margins forced to 0 and then my width to be automatically calculated from the left over space.

it never renders as i'd expect. there is always 49px of margin on the right or left (depending on which side i placed a margin of auto). i have no idea where its getting the 49px from. is there any other property i'd need to set to make it act like a div?



5+ Year Member

Msg#: 3863975 posted 3:28 am on Mar 6, 2009 (gmt 0)

try margin:0px 0px;
first o for top and bottom, second is for left and right.


WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3863975 posted 4:37 am on Mar 6, 2009 (gmt 0)

Note, you can drop the units when the rule is for 0, e.g. margin:0 0; or for that matter margin:0;

Zero is the same no matter what!

Global Options:
 top home search open messages active posts  

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved