CODEWITHSUNDEEP
csshtml
user210757
user210757

Reputation: 7376

How to make HTML Input take 100% space between 2 Elements?

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/

Upvotes: 0

Views: 265

Answers (1)

ntgCleaner
ntgCleaner

Reputation: 5985

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

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

Upvotes: 1

Related Questions