Text, button & input on same line with fluid input field

HTML & CSS
1

hi,

i’m wondering if it’s possible to have the following code appear on the same line with the <input /> field expanding to fill the gap between the text and the button. basically, i want the input field as wide as possible without wrapping the text or button above or below the input field. the block that contains this <p> is fluid.

<p>Category: <input name="name" /> <button type="submit">OK</button></p>

i’ve played around with applying CSS styles to these values but either the input stretches beyond the browser limits horizontally, the button &/or text gets wrapped or the entire horizontal space is not filled.

any ideas?

thanks,
eric

2

Something like this?


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			div{
				width: 100&#37;;
			}
			label{
				width: 20%;
			}
			button{
				width: 5%;
			}
			input{
				width: 75%;
			}
		</style>
	</head>
	<body>
		<div>
		<label for="name">Category: </label><input name="name" id="name" /> <button type="submit">OK</button>
		</div>
	</body>
</html>

but this still didn’t stretch 100% across in my browser…close though.

3

thanks! that definitely gets me in the ballpark. i’ll play around with it a little more and see if i can get it to stretch.

thanks,
eric