faux columns with a mix of undefined and fix width columns

[hv @ Fashion Content]

Forgive me if this is not the forum for CSS layout behaviour questions.

In classic GUIs it is quite easy to do what I aim for, but I don't recall
ever figuring out how to do it in css.

<div id="container">
<div id="text">
lots of text paragraphs
</div>
<div id="right">
fixed width column of icons and indicators
</div>
</div>

I wish container to get 100% width, right to get say 10em width and text to
get 100% - 10em width.

Hmm, I think I once got tables to behave like that. Would some display:table
do the trick?

Henrik

[Sander]

hv @ Fashion Content wrote:
> Forgive me if this is not the forum for CSS layout behaviour questions.

It might be for that, but this is a CSS design 101 question instead;
maybe m.d.web-development would be appropriate, but I'd really look at a
mailinglist like css-discuss instead.

Anyway:

> <div id="container">
> <div id="text">
> lots of text paragraphs
> </div>
> <div id="right">
> fixed width column of icons and indicators
> </div>
> </div>
>
> I wish container to get 100% width, right to get say 10em width and text to
> get 100% - 10em width.

#text { margin-right: 10em; }
#right { float: right; width: 10em; }

(This is easy, since regular block elements take up all available width
when not told to do something else.)

Cheers,
Sander

[Gus Richter]

Also, in the html, put <div id="right"> before <div id="text"> because
you want "text" to flow around/beside "right" and not vice-versa.

--
Gus