css column layout

Hello All,
If this is not the appropriate group for this post, please point me in
the right direction.

I am trying to create a layout that has three main columns. The
primary content is the left most column. The width of this should be
variable depending on the size of the browser window. The middle and
right columns should have a fixed width of 200 pixels. I can get the
middle and right columns working as expected. I can't figure out how
to make the first column change with the browser size. If I use a
width of 60% it almost works, but when the browser window is small,
the third column wraps around and appears way down at the bottom.

Is there some way to make the width of the first column simply "the
remainder". For example:


<div style="float: left; width: remainder">
main content
</div>


<div style="float: left; width: 200px">
middle column
</div>


<div style="float: rigth: width: 200px">
left column
</div>


Any suggestions? Thanks!

Yofnik said:

Any suggestions? Thanks!

This is a javascript newsgroup, you're looking for CSS or html authoring.

~A!

Yofnik wrote:

I am trying to create a layout that has three main columns. The
primary content is the left most column. The width of this should be
variable depending on the size of the browser window. The middle and
right columns should have a fixed width of 200 pixels. I can get the
middle and right columns working as expected. I can't figure out how
to make the first column change with the browser size. If I use a
width of 60% it almost works, but when the browser window is small,
the third column wraps around and appears way down at the bottom.

Is there some way to make the width of the first column simply "the
remainder". For example:

div style="float: left; width: remainder"
* *main content
/div

div style="float: left; width: 200px"
* middle column
/div

div style="float: rigth: width: 200px"
* left column
/div

Any suggestions? Thanks!

<table border="1" width="100%">
<tr>
<td align="left">main content</td>
<td width="200" align="left">middle column</td>
<td width="200" align="right">left column</td>
</tr>
</table>

Hope this helps,

--
Bart

Response to Yofnik <jeffbuzz13 (AT) gmail (DOT) com>:

If this is not the appropriate group for this post, please point
me in the right direction.

comp.infosystems.www.authoring.stylesheets

There is also:

comp.infosystems.www.authoring.html
comp.infosystems.www.authoring.site-design

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

Bart Van der Donck said:

table border="1" width="100%"
tr
td align="left">main content</td
td width="200" align="left">middle column</td
td width="200" align="right">left column</td
/tr
/table

This is not a good solution, because tables are meant for the tabular
display of data, not page layout. The issues IE has with it's broken box
model and nested table difficulties are reason enough, beside the fact
it's generally considered a horrid coding practice to use tables for layout.

The floating left column is the CSS "holy grail", as it were. Here's one
tutorial on making it work anyway:

http://www.ilovejackdaniels.com/css/...iquid-layouts/

Basically they use a background image to give the illusion of the left
column being a separate element in and of itself.

Good luck with your project!

~A!

Anthony Levensalor said the following on 1/2/2008 11:33 AM:

Bart Van der Donck said:


table border="1" width="100%"
tr
td align="left">main content</td
td width="200" align="left">middle column</td
td width="200" align="right">left column</td
/tr
/table
This is not a good solution,

It is a *very* good solution to the issue.

because tables are meant for the tabular display of data, not page
layout. The issues IE has with it's broken box model and nested table
difficulties are reason enough, beside the fact it's generally
considered a horrid coding practice to use tables for layout.

When a table solution does exactly what you want it to do, and a CSS
solution doesn't, you use the one that does what you want it to do.

The floating left column is the CSS "holy grail", as it were. Here's one
tutorial on making it work anyway:

http://www.ilovejackdaniels.com/css/...iquid-layouts/

'action' is null or not an object

Besides, it doesn't give a solution, it gives a hack to make it appear
as if you have a solution.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Yofnik wrote:

If this is not the appropriate group for this post, please point me in
the right direction.

I am trying to create a layout that has three main columns. [...]

CSS is on-topic in comp.infosystems.www.authoring.stylesheets, where more
competent people probably have already discussed your problem a number of
times. Suffice it to say that using any search engine before posting would
have gotten you much farther.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

Randy Webb said:
[snip]

When a table solution does exactly what you want it to do, and a CSS
solution doesn't, you use the one that does what you want it to do.

That, I cannot argue with. When the OP heads over to the CSS group and
mentions tables there, I hope they are as forgiving. Tables make good
things bad and bad things unusable.

[snip]

'action' is null or not an object

Well, don't tell his wife. She already suspects.

Besides, it doesn't give a solution, it gives a hack to make it appear
as if you have a solution.

I think I mentioned that it was illusory. Either way, the OP was asking
about CSS, and I abhor table layouts. I have seen too many break too
frequently and too easily. Getting started at a bad CSS tutorial is
better than using tables and applying CSS to them.

~A!

Response to Anthony Levensalor <killfile (AT) mypetprogrammer (DOT) com>:

I think I mentioned that it was illusory. Either way, the OP was
asking about CSS, and I abhor table layouts. I have seen too many
break too frequently and too easily. Getting started at a bad CSS
tutorial is better than using tables and applying CSS to them.

I wouldn't call anything written or elaborated on by Dave Child, "bad."

Perhaps unorthodox, definitely another way of doing the same old thing
(which is all this new-age Web 2.0 BS is about), but definitely not
bad.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

Thomas 'PointedEars' Lahn said:

CSS is on-topic in comp.infosystems.www.authoring.stylesheets, where more
competent people probably have already discussed your problem a number of
times. Suffice it to say that using any search engine before posting would
have gotten you much farther.

Hear hear. I'm with you on this one.

~A!