faux columns with a mix of undefined and fix width columns

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

faux columns with a mix of undefined and fix width columns

devel - 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



_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: faux columns with a mix of undefined and fix width columns

Sander-14
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
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: faux columns with a mix of undefined and fix width columns

Gus Richter
Sander wrote:

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

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
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout