Question

I’m trying to accomplish something that should be rather basic in CSS but I’m running in circles.

I have three divs in one fluid-width div. The two on the right have undefined width and should take up 100% of their allowed space. The full div already is fluid. And the far right div should have a width of 200px and that is fixed. Sort of like this:

[ [fluid(label)] [fluid(textbox)] [fixed=200(div)] ]

I’m trying to find a way to do this in CSS.

Thanks in advance…

edit:
Here’s the html

<footer>
    <form method="POST" action="/" id="input">
        <label for="message" form="input" class="username">Will:</label>
        <textarea id="message" cols="0" rows="0" autofocus form="input" wrap="hard" name="message"></textarea>
        <div id="buttons">
            <button type="submit" form="input" class="button medium" name="send" value="Send">Send
            </button>
            <button type="button" form="input" class="button medium" name="extras" value="Extras"><span>Extras</span><span>^</span>
            </button>
        </div>
    </form>
</footer>

Answer 1

you could try using display:table-cell – but you’ll need an extra div around the textarea:

http://jsfiddle.net/tU6w2/

(though i should add this won’t work in IE7 – it doesn’t support table-cell)

EDIT

in answer to the additional comments, another try – this time with jQuery – i don’t think it can be done in CSS only:

http://jsfiddle.net/tU6w2/1/