100% table next to floated element

[Jeep Stone]

If I have a floated (left) div with a set width, how can I put a 100% width table next to it, without it going off the page? Is this a js fix maybe?

[Mr Anderson]

If I have a floated (left) div with a set width, how can I put a 100% width table next to it, without it going off the page?

You can't. 100% of the width, plus the width of something else alongside it will always equal more than 100%.

Is this a js fix maybe?

You can probably resize with javascript, but why not make it not 100% to start with?

[Jeep Stone]

Do you mean make it 100% with js?

I'm having to rework some existing table code so that I can break the page up into sectional divs so that I can, in turn, use CSS to put in some page breaks.

[Mr Anderson]

Well I suppose you could try this method, but I'm not sure if it works with tables though.

1. Give them a relative positioned container, with a left margin to match (or slightly exceed) the width of the floated div.

2. Set the width on the floated div, set its padding to zero, and set its left margin to be the negative of the same value as the left margin on the container. (So if the container is 100px left margin, the floated div would be -100px).

3. Then set the width of the table to be 100% give it a negative left margin to match the above, and give it an equivalent left padding (so 100px left padding in this example).

4. Float the table right - you'll also need to float the left div to the right in IE 6 as it will get it wrong otherwise.

I use the same technique on my blog if you want to have a look.

[Mr Anderson]

Do you mean make it 100% with js?

No, I meant to resize it to less than 100%. Setting the width to 100% means it will take the width of the parent as a measurement. So it will fill the parent, adding the left div means that something has to go off the page (when the parent also fills the width of the page). So you need to find a way to set the size of the table to be less than the width of the screen. You can try with js to dynamically resize it, or you can try the method above see if it will work with tables too.

[Jeep Stone]

Thanks. I'll try your suggestion before the js route.