Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation Getting an input box to fill a divs width?

    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
    PHP 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
    Code:
    #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

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Adding size attribute to the input tag worked for me.

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

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •