CSS placing HTML elements

Question

I'm trying to sort HTML elements. Basically, I would like to set UL LI menu (inline) to the right side, and the INPUT on the left to take all the remaining space, not to be fixed, and all that in 1 line. 3 LI elements, take just as many space as it needs (minimum, not fixed couse i might add some elements), and INPUT take everything else as far as it can (100% of whats left in line) .

I tried with various display: block, inline, inline-block, table, table-cell (with this I almost succeeded), float left, right, and i can't set it without putting fixed width on something...

   <main> 
      <div id="searchBar">

    <form>
      <input id="searchInput"/>
    </form>

        <ul id="searchOptions">
          <li><a href="#"></a></li>  
          <li><a href="#"></a></li>  
          <li><a href="#"></a></li>
        </ul>

      </div>
    </main>

maybe to put some margins, overflows, hacks?

please help!

Answer 1

Answer from Alohci is what I was looking for! I solved it like this:

   <main> 
        <div id="searchBar">
            <div id="searchText">
              <form>
                <input id="searchQuery" />
              </form>
            </div>
            <div id="searchOptions">
              <ul>
                <li><a href="#">Cla</a></li>  
                <li><a href="#">Res</a></li>  
                <li><a href="#">Pro</a></li>
              </ul>
            </div>
        </div>
    </main>

main div#searchBar {
    display:table;
    width:100%;
}

main div#searchText {
    display:table-cell;
    width:100%; 
}

main div#searchOptions {
    display:table-cell;
    width:100%;
}

main input#searchQuery { width:100%; }

main ul { display:table; }

main ul li { display:table-cell; }

main ul li a { display:table-cell; }

I've created more divs around elements, and make main div as table, and those divs as cells, and after that UL as table and LI's as cells... I guess before it didn't work as FORM and INPUT was not in div, and wasn't able to fill 100% up to UL...

But Alochi gave me more compact version of this, THNX!

Answer 2

Like this, maybe?

ul { 
    list-style-type: none;
    display: table-cell;
    width: 1px;
    padding:0 0 0 5px;
}
form {
    display:table-cell;
    width:100%;
}
li { 
    display:table-cell;
    white-space: nowrap;
    padding:0 5px
}
input {
    width:100%;
}