Hi. I'm trying to achieve a right-hand-floated box, with a variable list of tables or divs (generated via ASP.NET Repeater, but that's not important) to the left. The tables/divs should expand to fill the remaining width.
That would be fine: float the box to the right, and set a margin-right on each of the tables or divs. However, I want the tables/divs to expand to fill the full width of the page after they have 'gone past' the end of the float - basically, to wrap around the floated box, filling the remaining width.
(Here's some code that would be a basis for experimentation: I want the divs - or equivalent tables - to not overlap the floated box, but take the full width available.)
<div style="border: 1px solid black; background-color: red; float:right; width:40em; margin:10px; padding:10px;">
Hello, world
</div>
<div style="background:yellow; margin:10px; padding:10px;">
One
</div>
<div style="background:yellow; margin:10px; padding:10px;">
Two
</div>
<div style="background:yellow; margin:10px; padding:10px;">
Three
</div>
</body>
</html>
The only thing I have found that gets anywhere close is to have one of the columns within the tables to have a huge width, longer than is possible - e.g. 3000px. The table then 'expands' to try to get to 3000px but can't, and so it fills the available width, taking into account the floated box when it's near the top of the page, and just taking the whole width a little further down when the floated box isn't there anymore.
I hope I have explained this well enough, please comment if not. I did search for duplicates expecting plenty but I believe I didn't find this exact question; only people asking for the same thing but without the tables expanding to full width after the floated box is 'out of the way'. Thanks.