Dushyant Patel’s Blog

CSS issue Input width=100% & padding in IE issue

I was having a problem with width on input[text] fields in IE

In IE, it renders the width as 100% + 10px(padding which i have given for search icon).


<div class=”container”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>

<div class=”button_div”>
<input type=”submit” name=”button” id=”button” value=”Search” />


.container{ width:250px; float:left}
.button_div {width:100px; float:right}
.container input{ width:100%; max-width:100%; padding-left:10px;}

Wrap the input field with a 100% div with no padding and no margin and set the input field inside that div to 100% width with a padding of 10px

<div class=”container”>
<div style=”width:100%”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>


Filed under: Technology

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: