css column layout

[Yofnik]

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!

 

[Anthony Levensalor]

Yofnik said:

Any suggestions? Thanks!

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

~A!

 

[Bart Van der Donck]

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,

 

[Anthony Levensalor]

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/faux-columns-for-liquid-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!

 

[Thomas 'PointedEars' Lahn]

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

 

[Anthony Levensalor]

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!

 

[Anthony Levensalor]

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!

 

[Anthony Levensalor]

-Lost said:

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.

Oh, I had no intention to disparage his work in the slightest, I was
just trying to point out that even a bad CSS would be preferable to
tables. I didn't mean to infer anything about him or his site.

~A!

 

[David Mark]

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


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


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.



'action' is null or not an object

So the guy doesn't know JavaScript. I haven't read his article, so I
can't vouch for his CSS abilities either. But cross-browser multi-
column layouts without tabular semantics are not hard these days (as
opposed to five years ago.)

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

The tables are the hack as they mess up the semantics of the page and
in the worst cases render the page incomprehensible to sight-impaired
readers and search engines. They also make it impossible to leverage
handheld style sheets to rearrange the layout to better fit small
screens.

Typically the only trickery involved with positioned (or floating)
DIV's for columns involves making them appear taller than they are.
The semantics of the page are preserved and when it comes to visuals,
perception is reality.

 

[Anthony Levensalor]

Randy Webb said:

[snip]

I am not going to have a tables vs. broken CSS debate here. If a table
is the best solution, then it is the best solution no matter where it is
debated. The same goes for a CSS solution. But, to simply make a blanket
statement "Don't ever use tables for layout" is just plain wrong.

Agreed. I tend to think most absolute statements are wrong. In my
vehemence over tables I overstepped.

~A!

 

[The Magpie]

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

It isn't - you want a CSS group.

I am trying to create a layout that has three main columns. [snip]
Any suggestions? Thanks!

Yes - two layers, one floated left however wide you want it, one
floated right filling the rest of the page. Inside the second layer,
do the same. Plus, always use percentage widths so that you don't get
collapsing layers and the proportions will be the same on all browser
window sizes.

 

[Dr J R Stockton]

I am not going to have a tables vs. broken CSS debate here. If a table
is the best solution, then it is the best solution no matter where it
is debated. The same goes for a CSS solution. But, to simply make a
blanket statement "Don't ever use tables for layout" is just plain
wrong.

Agreed.

HTML was, AFAICS, initially written moderately pragmatically, so that a
<table> sufficed for anything of tabular or grid-type layout, whether or
not truly tabular.

The error has been the lack of provision of : either a documented
standard attribute, "grid" or "layout", with the sole effect of removing
the presumption that the content would be tabular data ; or a new tag
<grid> or <layout> behaving similarly to <table>.

Rhetorical :
What proportion of coders could lay out a 7-segment display as a Table?
What proportion of coders could lay out a 7-segment display in pure CSS?
I can say only that the former is not zero but the latter might be.

 

[David Mark]

In comp.lang.javascript message <[email protected]>,
Wed, 2 Jan 2008 16:02:10, Randy Webb <[email protected]> posted:




Agreed.

I think it is a good rule these days. Five years ago it would have
been unworkable.

HTML was, AFAICS, initially written moderately pragmatically, so that a
<table> sufficed for anything of tabular or grid-type layout, whether or
not truly tabular.

The error has been the lack of provision of : either a documented
standard attribute, "grid" or "layout", with the sole effect of removing
the presumption that the content would be tabular data ; or a new tag
<grid> or <layout> behaving similarly to <table>.

Rhetorical :
What proportion of coders could lay out a 7-segment display as a Table?
What proportion of coders could lay out a 7-segment display in pure CSS?
I can say only that the former is not zero but the latter might be.

The number of columns (if that is what you mean by segment) doesn't
really complicate things, though more than 3 would seem a bad idea for
a Web page. Assuming such a layout were needed, I would advise
against using a table to render it as it would be virtually unusable
on mobile devices. On the other hand, using CSS positioning, it is
trivial to turn it into a single-column layout with a handheld style
sheet.

 

[Dr J R Stockton]

In comp.lang.javascript message <117794ba-9dd9-4e28-ae19-10eafdd778a7@s1
2g2000prg.googlegroups.com>, Thu, 3 Jan 2008 17:57:37, David Mark

The number of columns (if that is what you mean by segment) doesn't
really complicate things, though more than 3 would seem a bad idea for
a Web page. Assuming such a layout were needed, I would advise
against using a table to render it as it would be virtually unusable
on mobile devices. On the other hand, using CSS positioning, it is
trivial to turn it into a single-column layout with a handheld style
sheet.

(1) It was rhetorical!
(2) I think you misunderstood - see <http://en.wikipedia.org/wiki/Seven-
segment_display> and <$$7seg.htm>.
(3) E-mail in hand.

 

[David Mark]

In comp.lang.javascript message <117794ba-9dd9-4e28-ae19-10eafdd778a7@s1
2g2000prg.googlegroups.com>, Thu, 3 Jan 2008 17:57:37, David Mark



(1) It was rhetorical!

I know. That's why I didn't answer it.

(2) I think you misunderstood - see <http://en.wikipedia.org/wiki/Seven-
segment_display> and <$$7seg.htm>.

I did misunderstand. But I would implement that with positioned
elements as well.