CSS make a width:100% stop against floating objects

Question

Try this:

<div style="float:left"><p>LEFT</p></div>
<div style="float:right"><p>RIGHT</p></div>
<div><p>
    <input type="text" style="width:100%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>

This ends up with LEFT and RIGHT being on the first line, the text input taking up the whole of the second line, and "Submit" and "Link" being on a third line.

I want all of these to be on one line, and if the window is widened, the text input should widen. How do I do this without tables?

Answer 1

See: http://jsfiddle.net/thirtydot/mSwBe/

This works in all modern browsers.

It's close enough on IE7 (no support for box-sizing: border-box, but this can be worked around easily enough, in this instance).

box-sizing: border-box makes the text input fit exactly inside the width of its containing span.

overflow: hidden is being very useful.

HTML:

<div id="left"><p>LEFT</p></div>
<div id="right"><p>RIGHT</p></div>
<div id="middle">
    <span id="buttonContainer">
        <input type="submit" />
        <a href="">Link</a>
    </span>
    <span id="textContainer">
        <input type="text" />
    </span>
</div>

CSS:

#left, #right, #middle {
    padding: 5px;
}
#left {
    float: left;
    background: #0ff;
}
#right {
    float: right;
    background: #0ff;
}
#middle {
    background: #f0f;
    overflow: hidden;
}

#middle input { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#textContainer {
    overflow: hidden;
    display: block;
}
#textContainer input {
    width: 100%;
}
#buttonContainer {
    float: right;
}

Answer 2

It can't be done without setting exact widths.

Set exact width to left and right columns, also margin to center div. Here is my solution

JsFiddle

http://jsfiddle.net/xe4EJ/2/

Code

<div style="float:left; width:200px; background-color:red"><p>LEFT</p></div>

<div style="float:right; width:200px; background-color:red"><p>RIGHT</p></div>

<div style="margin:0 210px 0 210px"><p>
    <input type="text" style="width:80%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>​