Saturday, 7 September 2013

How to align a div with the right of a table?

How to align a div with the right of a table?

I have a structure like this:
<table id="A">
...
</table>
<div id="B">some lefty text</div>
<div id="C">some righty text</div>
What I need is to align B to the left edge of the table, and align C with
its right edge, so that I end up with:
AAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAA
BBBBBB CCCC
I'm stuck on how to do this in CSS. I've tried floating C to the right,
but this puts C at the right of the entire window, rather than aligned to
the right of the table even if I enclose everything in an outer DIV.
None of the elements are of fixed size, but it's a reasonable assumption
that the sum of width of the contents B and the width of the content of C
are less than the width of the content of A. (i.e. the diagram is a
plausible layout for the content). The solution needs to work in IE8+.

No comments:

Post a Comment