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