Search code examples
htmlwidthcontainersfill

How to create a HTML container which will fill all available width between two floating elements?


Here is a schema of what I want to render, and as simple as it seems I can't find a way to code the container between the two floating elements...:

 ----------                                                ---------- 
|          | Some text text text text text text text text |          |
|          | text (in a <p> element).                     |          |
| float:   |  ------------------------------------------  | float:   |
|   left;  | |      The container I want to create      | |   right; |
|          |  ------------------------------------------  |          |
|          | Some other text text text text text text tex |          |
 ----------  text text text text text text text text text |          |
text text text (in another <p> element).                  |          |
                                                           ---------- 

The width of each of the two floating elements is unknown and may vary, so I have to code the container independently of them (as well as I can't change their code). And I want to have its left and right borders along the borders of the floating elements.

For instance, if I use a div element (with display:block) its left and right border are under the two floating elements... If I use a table element (or a div with display:table) it won't fill all available width if there isn't any full text line in it...

I bet there is a simple solution, but I simply can't find it! Thanks for any help!


Solution

  • I got it! Ok it's a kind of hack and it uses a table, but it works on every single browser (even IE6), and I may manage to clean it up a bit now I've got it working...

    The key is to create a table with at least two cells, and to set the width of one of them to 100%; this way the browser will display this cell as large as possible in order to get its actual displayed size as close to 100% of the whole table as possible. And now I can put what I want in this cell.

    Here is the corresponding HTML code:

    <div style="float:left;">...</div>
    <div style="float:right;">...</div>
    <p>Some text...</p>
    <table>
        <tr>
            <td style="width:100%;">
                Some content
            </td>
            <td style="width:1px;"/>
        </tr>
    </table>
    <p>Some other text...</p>
    

    This way, the container will display correctly regardless of the size of whatever is in the two floating div. And if the 1px-wide empty cell on the right is a problem, I can always put another one on the left to get it symmetrical and less visually annoying (but as a matter of fact, with a 0-border-spacing on the table and a 0-padding on each cell, the 1px-wide empty cell is actually not visible...).

    Now I've got to find a way, if possible, to get all this a bit cleaner (and maybe even without using a table element?).