Question

Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.

This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).

I originally had the html & CSS shown in:
http://jsfiddle.net/jjoensuu/qSz5x/5/

In an attempt to solve this issue I found the solutions in:
How to make text input box to occupy all the remaining width within parent block?

I created what I think is similar to “wdm”‘s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here:
http://jsfiddle.net/jjoensuu/rJ45P/8/

I also tried the solution from “Marty Wallace” in same thread but could not get it to work.

So as a reference to my code on the jsfiddle site, the “topsearch” box gets the width of ~1300 pixels but the “field-topsearch” input field stays at around 156px.

With some of my attempted solutions the “Go” button wraps to the next line below. Any help on how to solve this would be appreciated.

Answer 1

Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/

CSS

.topsearch
    {
    height: 40px;
    line-height: 35px;
    padding-right: 10px;
    width:100%;
    display:table;
    }

.topsearch label
    {
    color: #c98116;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 5px;
    }

.topsearch label, .topsearch form
    {
    display: inline;
    } 

.topsearchfield
    {
    border: none;
    height: 24px;
    font-size: 15px;
    width: auto;
    } 
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
    {
    display: table-cell;
    }

​