Welcome to WebmasterWorld Guest from 54.226.34.209

Forum Moderators: incrediBILL

Message Too Old, No Replies

input and div width rendering

     
2:27 am on Mar 6, 2009 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 18, 2008
posts:100
votes: 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?

3:28 am on Mar 6, 2009 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 3, 2009
posts:44
votes: 0


try margin:0px 0px;
first o for top and bottom, second is for left and right.
4:37 am on Mar 6, 2009 (gmt 0)

Senior Member

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

joined:May 26, 2000
posts: 37301
votes: 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!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members