0

Given the following HTML, how would I make the Label, Input, and 2 Buttons exist on the same "line", and have the input take 100% space between the Label and 2 Buttons, with changing browsers widths? In other words, I want the input anchored on both sides, so that that will change width as you make the browser smaller and larger widths. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>

    <style>
        /* ?? */
    </style>


</head>
<body>
    <div id="container">
        <form class="form">
            <p>
                <label>xyz:</label>
                <span class="item">
                    <input type="text" class="txt" name="description" id="description" />
                    <button>A</button>
                    <button>B</button>
                </span>
            </p>
            <br clear="all" />
        </form>
    </div>

</body>
</html>

See JSFiddle here: http://jsfiddle.net/3vGtJ/

user210757
  • 6,996
  • 17
  • 66
  • 115
  • jsfiddle example please – underscore May 01 '13 at 17:07
  • 1
    possible duplicate of [CSS input take remaining space](http://stackoverflow.com/questions/6938900/css-input-take-remaining-space) – j08691 May 01 '13 at 17:15
  • j08691 - i don't think it's a duplicate, it doesn't solve elements to the right of the input. thanks. – user210757 May 01 '13 at 19:10
  • [Here](http://stackoverflow.com/a/16240805/453277) are a few "remaining space" techniques for inputs that I wrote up recently. It might be helpful. – Tim M. May 01 '13 at 20:52

1 Answers1

1

You could also try using display:table and display:table-cell

http://jsfiddle.net/3vGtJ/1/

ntgCleaner
  • 5,865
  • 9
  • 48
  • 86
  • can you make this work with the original HTML, or at the most, by adding containers around some of the elements? I try to avoid table attributes because I feel like I'm using tables, but am open to a solution with these attributes if necessary – user210757 May 01 '13 at 19:29
  • Sure thing. I didn't notice your fiddle when I was answering. The only bad thing about table attributes in CSS is that it's not IE6+7 friendly (I think). – ntgCleaner May 01 '13 at 19:45
  • 1
    Here's the fiddle. It's ugly, but doing some relative positioning should help you out. http://jsfiddle.net/3vGtJ/1/ – ntgCleaner May 01 '13 at 20:20
  • 2
    @user210757 CSS table _presentation_ has nothing to do with table _markup_ in HTML. There are no reasons to avoid such _presentation_. `display: table` looks like most natural solution for you purpose. – Marat Tanalin May 01 '13 at 20:25