homepage Welcome to WebmasterWorld Guest from 54.196.198.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
input and div width rendering
noyearzero




msg:3863977
 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?

 

oluoch28394




msg:3863994
 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.

tedster




msg:3864020
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved