...

View Full Version : Getting an input box to fill a divs width?



LJackson
08-12-2010, 11:47 PM
Hi All,

i have an input box inside a div and i want the input box to fill the width of the div, i have tried adding a size value to the input which kinda works but not for all browsers, i was wonderingif there is another way?

here is my html code

<div id="header2">
<div class="logo"><img src="/images/kernow_connect.gif" /></div>

<div class="search_container2">

<div class="main">
<input type="text" id="keyword" tabindex="0" style = "height:40px; padding:10px; font-size:24px; color:#999999;" />
<img src="/images/loading.gif" id="loading" alt="Loading" title="Loading" width="18" height="18" />
<div id="ajax_response"></div>
</div>
</div>

</div>


and my css

#header2 {
margin:0 auto;
width:940px;
height:150px;
z-index:1;
padding:5px;
background-color:#FFFFFF;
}
#header2 .logo {
float:left;
width:200px;
height:115px;
z-index:1;
}
#header2 .search_container2 {
margin-top:80px;
height:40px;
padding:10px 10px 10px 250px;
}

#header2 .main {
height:40px;
margin-bottom:10px;
}

#loading {
visibility:hidden;
padding-left:5px;
}
#ajax_response {
border:1px solid #8789e7;
background:#fff;
position:absolute;
display:none;
padding:2px 2px;
top:148px;
z-index:1;
color:#000000;
}

any ideas?

p.s here is my page
http://www.kernow-connect.com/newindex.php
thanks
luke

jolly_nikki
08-13-2010, 12:12 AM
Adding size attribute to the input tag worked for me.


<input type="text" id="keyword" size = "55" tabindex="0" style = "height:40px; padding:10px; font-size:24px; color:#999999;" />

LJackson
08-13-2010, 12:26 AM
Hi,

yeah that seems to work ok,

have checked it in IE 8 and Firefox 3.6.8 and they are both looking fine, will check other browsers tomorrow :)

cheers mate
Luke



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum