I have a page, with a fluid columnar layout - the columns are divs
floated next to each other.

It has two main columns in it:

[ [menu, 20% width] [        maincontent 80% width           ] ]

Sometimes in the maincontent section, I also have two columns:

[ [menu, 20% width] [        maincontent 80% width           ] ]
[ [menu, 20% width] [ [textbit ] [illustration 240px width ] ] ]

The problem here us the width of textbit. It needs to be the width of
the viewport, minus the width of the menu column (20%), minus the width
of the illustration column (240px):

        width of texbit = (width of viewport - 20%) - 240px 

I can't work out a way to attain this in CSS. 

There's no way to set the correct width on it without referring to DOM
information.

If the textbit gets too wide, the illustration won't be allowed to float
up beside it.

Repositioning it left to make room doesn't help, because it leaves its
box behind still blocking the floated illustration (I was up late
playing with Meyer's Multi-Unit Any-Order Columns):

<http://meyerweb.com/eric/thoughts/2005/11/09/multi-unit-any-order-colum
ns/>

I reckon this is going to be fundamentally impossible using CSS alone.

Daniele

In article <1i97rat.1q019kbr6w20fN%real-not-anti-spam-address@apple-
juice.co.uk>, real-not-anti-spam-address@apple-juice.co.uk says...
 
> Sometimes in the maincontent section, I also have two columns:
> 
> [ [menu, 20% width] [        maincontent 80% width           ] ]
> [ [menu, 20% width] [ [textbit ] [illustration 240px width ] ] ]
> 
> The problem here us the width of textbit. It needs to be the width of
> the viewport, minus the width of the menu column (20%), minus the width
> of the illustration column (240px):
> 
>         width of texbit = (width of viewport - 20%) - 240px 
> 
[snip]
> 
> If the textbit gets too wide, the illustration won't be allowed to float
> up beside it.
> 

If the image is floated, why do you need to set the width of [textbit]? 
Do you want to have just white space under the image?

-- 
Pete Gray

Pete Gray  wrote:

> In article <1i97rat.1q019kbr6w20fN%real-not-anti-spam-address@apple-
> juice.co.uk>, real-not-anti-spam-address@apple-juice.co.uk says...
>  
> > Sometimes in the maincontent section, I also have two columns:
> > 
> > [ [menu, 20% width] [        maincontent 80% width           ] ]
> > [ [menu, 20% width] [ [textbit ] [illustration 240px width ] ] ]
> > 
> > The problem here us the width of textbit. It needs to be the width of
> > the viewport, minus the width of the menu column (20%), minus the width
> > of the illustration column (240px):
> > 
> >         width of texbit = (width of viewport - 20%) - 240px 
> > 
> [snip]
> > 
> > If the textbit gets too wide, the illustration won't be allowed to float
> > up beside it.
> > 
> 
> If the image is floated, why do you need to set the width of [textbit]?
> Do you want to have just white space under the image?

No, but [textbit] and [illustration 240px width] are adjacent columns.
They are both floated (they need to be), and they are both divs.

[illustration 240px width] isn't just an image - it does contain an
image, but text too.

Daniele