How to create a <div> string with one element that grabs extra space

Question

I am trying to create a flexible line in html without using a table, so that one of the line elements captures additional horizontal space. I have a basic solution here, but it seems uncomfortable. For example, the button should be before entering the div so that everything is on the same line, even if on the page it looks as if it appears. Also, things become more cumbersome when you add a second button (not included in my example). Does anyone know how best to do this? Here is the JSFiddle, and I pasted the code below. A valid solution should be flexible enough to easily add fixed-width elements to the string. Please note that in this example the gray box can be changed and the text input will automatically expand. http://jsfiddle.net/jjfPK/8/

<div id="grayBox"> <div id="searchbar"> <button>Search</button> <input type="text"></input> </div> </div> <style = "text/css"> #grayBox { width:400px; background-color:lightgray; } #searchbar { margin-right:70px; padding: 10px; } #searchbar input { width:100%; } #searchbar button { float:right; margin-right:-70px; } </style> 

Answer 1

Try using display: table . You should use this when you have a layout for non-point data that should behave like a table. Not supported by IE7, but supported by IE8 + and all other major browsers.

http://jsfiddle.net/5CBS4/

modification of your html is required to enable containers for virtual cells.

 <div id="grayBox"> <div id="searchbar"> <div><input type="text" /></div> <div><button>Search</button></div> <div><button>Search</button></div> <div><button>Search</button></div> </div> </div>​ 

CSS applies table, row, and cell styles. Use > to target direct descendants. Then use first-of-type to make the first cell as possible.

 #grayBox { display:table; width:400px; height:400px; background-color:lightgray; } #searchbar { display:table-row; margin-right:100px; padding: 10px; } #searchbar > div { display:table-cell; } #searchbar > div:first-of-type { width: 100%; padding: 0px 5px 0px 5px; } 

Answer 2

See demo script: you can change the values ​​to suit your needs.

Demo: http://jsfiddle.net/jjfPK/10/embedded/result/

Updated script: March 25

Fiddle: http://jsfiddle.net/aEyqC/1/

Demo: http://jsfiddle.net/aEyqC/1/embedded/result/

HTML:

 <div id="grayBox"> <ul id="searchbar"> <li><input type="text"></input></li> <li><button>Search</button></li> </ul> </div> 

CSS

 #grayBox { width:400px; height:400px; background-color:lightgray; } #searchbar { padding: 10px; overflow:hidden; } #searchbar li { display:inline; } #searchbar input { width:80%; } #searchbar button { float: right; width: 16%; }