Question

Is there a way (CSS) for me to make sure that a textbox and search button vary sizes when the div does?

This is what my search bar looks like:

<div class="userinfo">
    <form><table id="search" border="0"><tr>
            <td valign="top"><input type="text" name="search"></td>
            <td valign="top"><input type="image" name="search-button" src="img/search.png"></td>
    </tr></table></form>
</div>

And userinfo:

.userinfo {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

.userinfo input[type=text] { 
    width: 70% 
}

userinfo lies in the middle of the page with a width of 60%, however, I am trying to get the textbox within userinfo to be of a certain width relative to userinfo. The above isn’t working. Ideas?

Answer 1

It sounds like you should assign a percentage width to the search input as well.

It’s also probably a good idea to keep the search button at a fixed width (although not necessary).

Edit: Here is an example:

<div class="widget">
    <input type="text" name="query">
    <input type="submit" name="search" value="Search">
</div>

<style>
    .widget { width: 30% }
    .widget input[type=text] { width: 70% }
</style>