Форма переменной ширины для переменной ширины div?

Question

Есть ли способ (CSS) для меня, чтобы убедиться, что текстовое поле и кнопка поиска изменяются размеры, когда div делает?

Вот так выглядит моя строка поиска:

<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>

А userinfo:

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

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

userinfo лежит в середине страницы с шириной 60%, однако я пытаюсь получить текстовое поле в пределах userinfo определенной ширины относительно userinfo. Выше не работает. Идеи?

Answer 1

Похоже, вы также должны назначить процентную ширину для поиска.

Вероятно, также рекомендуется держать кнопку поиска на фиксированной ширине (хотя и не обязательно).

Редактировать: Вот пример:

<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>