Question

I want to have a SEARCH div where I have a:
1) Button
2) Label
3) TextBox

MY GOAL:
The edit Box should automatically resize to it’s MAX WIDTH by default and whenever I physically resize the browser page, without moving down !!!

I’m not even sure this is something you will want to use a DIV but here is what i have tried (and failed):

<div id="search">    
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" /> 
      Search:  
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div>
</div>

The CSS looks like this:

div#search
{
   height: 30px;
   border: 1px solid #80808D;
   padding: 5px 0px 5px 0px;
}

div#searchbtn
{
   float: left;
   display: inline;
   padding: 0px 10px 0px 10px;
}

div#searchtxt
{
   float: left;
   width: auto;
   display: inline;
   padding-right: 10px;
}

I was hoping that the width: auto meant the div would auto-expand (rsss).

I tried putting a width of 90% on the TextBox but it never works well when resizing.
I tried putting some width on the div searchtxt but again didn’t work properly when resizing.

If using div is the way forward, what would be the right CSS for the various DIVs?
If this is NOT the way …then what other way would work better?

Thanks.

Answer 1

Using some display: trickery…

Live Demo (Only tested in FireFox 3.6.x)

<style type="text/css">
div#search {
   border: 1px solid #80808D;
   display: table;
   height: 30px;
   padding: 5px 0px 5px 0px;
}

div#searchbtn {
   padding: 0px 10px 0px 10px;
   white-space: nowrap;
}

div#searchtxt {
   display: table-cell;
   padding-right: 10px;
   width: 100%;
}
input#txtSearch {
   width: 100%;
}
</style>

<div id="search">
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" />
      Search:
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" />
    </div>
</div>

Note: Internet Explorer 8 (and higher) supports the property values “inline-table”, “run-in”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row-group”, and “inherit” only if a !DOCTYPE is specified.