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

Question

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!

Answer 1

You have to use a margin to get out of the floats as they are not within the context of the containing element. It can work with a fluid or fixed width design:

<div id="LeftColumn" style="float: left; width: 20%;">
    <p>Left Column</p>
</div>
<div id="CenterColumn" style="margin: 0 25%;">
    <p>Some text text text text text text text text text (in a <p> element).</p>
    <div style="width: 100%; text-align:center;">
        <p>The container I want to create</p>
    </div>
    <p>Some text (in another <p> element).</p>
</div>
<div id="RightColumn" style="float: right; width: 20%;">
    <p>Right Column</p>
</div>

Answer 2

Based on the answer by @durilai (I believe this solves the problem more accurately, but that depends on what you really want to do):

<div style="float: left; width: 20%;">
    <p>Left Column</p>
</div>
<p>Some text text text text text text text text text (in a <p> element).</p>
<div style="margin: 0 25%;">
    <p>The container I want to create</p>
</div>
<p>Some text (in another <p> element).</p>
<div style="float: right; width: 20%;">
    <p>Right Column</p>
</div>

This will, unlike @durilais solution, behave like with normal floats when text is "higher" than the floats. It will still require you to know the widths of the floats, and it will not behave correctly once the innermost <div> is below the two floats, but it's about as close to a solution you can get.

Answer 3

It's not possible. Here's why:

The width property can take any of these values:

1. a fixed length
2. a percentage
3. inherit (=100%)
4. auto (=100%-(margins+borders+paddings))

Neither of these will work with your prerequisites:

1. you need to know the page width and the floating containers' widths
2. you need to know the floating containers' widths as percentages
3. this will not leave the floating containers alone
4. you need to know the floating containers' widths and set the margins accordingly

Answer 4

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?).