CODEWITHSUNDEEP
css
MZB
MZB

Reputation: 2111

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+.

Upvotes: 0

Views: 85

Answers (3)

Carl Papworth
Carl Papworth

Reputation: 1322

try using a wrapper around your divs.

<div id="wrap">
  <table id="A">
  ...
  </table>
  <div id="B">some lefty text</div>
  <div id="C">some righty text</div>
</div> <!-- end wrap -->

Set the Wrap size to whatever u want your full table to be, and set table to 100% Say with a 500px width table it would be somehting like this:

#wrap {
position: relative;
width: 500px;
}

table {
position: relative;
width: 100%;
}

#a{
float: left;
}

#b{
float: right;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

Wrap the table in a div and then float the divs

jsFiddle example

HTML

<div id="wrapper">
    <table id="A">
        <tr>
            <td>table</td>
        </tr>
    </table>
    <div id="B">some lefty text</div>
    <div id="C">some righty text</div>
</div>

CSS

table, div {
    border:1px solid #999;
}
table {
    width:100%;
}
#B {
    float:left;
}
#C {
    float:right;
}
#wrapper {
    width:50%;
}

Upvotes: 3

Jon
Jon

Reputation: 437336

Wrap all three pieces of content in a container and give it display: inline-block so that it shrinks to fit the width of its contents (given the description this will be the width of the table).

After doing this the float solution you describe will work as intended.

See it in action.

Upvotes: 2

Related Questions