How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

[Dan V.]

How do you do a css 2 column layout with header and footer, with the 2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as min.
and 1024 x 768 resolution as a max?

Ideally the layout would be centered so it scales better visually.

This would be great for me.

Thanks,
Dan V.

[Spartanicus]

"Dan V." <[e-mail]> wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column auto-stretching
By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack
suitable for a fixed pixel width "column" (not suitable if the column
contains text).

The only other IE compatible method I'm aware of requires kicking IE6
into quirks mode.
800 x 600 resolution as min.
No such thing, 800x600 is a common Screen Area size, screen resolution
is the granularity of the pixels expressed as Pixels Per Inch.
Ideally the layout would be centered so it scales better visually.

Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.

--
Spartanicus

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Spartanicus wrote:

"Dan V." <[e-mail]> wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column auto-stretching
By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack

That is not very clever, IMHO.
The only other IE compatible method I'm aware of requires kicking IE6
into quirks mode.
It is not that hard. Changed my old example little:
http://www.student.oulu.fi/~laurirai...float2col.html

That example has been there for ages, I only added footer and removed
width.

It can be done much simpler, this is complicated one, because it answers
to question how to get border between columns, and it works in IE5...
(whiout either requirement, it is quite clean solution, but does require
one extra element, or some tricks.)

Ideally the layout would be centered so it scales better visually.

IMHO, that is not good idea.
Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.

And use max-width only for stuff that really benefit from it. Like
paragraphs. Add you use bigger value than you think it is best, as there
is differences between people, and there is no proof that short column
are easier to read, when difference is huge. (there is studies about
subject somewhere in internet, I think I have seen 2 at least.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Dan V.]

This looks good in IE 6 and Firefox 1.0 - which I do most of my testing with
as they have a lot of market share.
I kind of forget about IE 5 as I am new and I want to know the basics before
any hacks.

If I use this code (with thanks) how can I have the content in the 2nd
'column' stretch only to say 700 px max. (Max-width is the only way that I
am aware - but I don't know how many browsers support this for a div.)
Some of the content will look 'silly' if it stretches past 1024 x 768
resolution.

I guess I could assume people won't choose silly widths..?

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Spartanicus wrote:

"Dan V." <[e-mail]> wrote:

How do you do a css 2 column layout with header and footer, with the 2ndcolumn auto-stretching

By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack

That is not very clever, IMHO.

The only other IE compatible method I'm aware of requires kicking IE6
into quirks mode.

It is not that hard. Changed my old example little:
http://www.student.oulu.fi/~laurirai...float2col.html

That example has been there for ages, I only added footer and removed
width.

It can be done much simpler, this is complicated one, because it answers
to question how to get border between columns, and it works in IE5...
(whiout either requirement, it is quite clean solution, but does require
one extra element, or some tricks.)

Ideally the layout would be centered so it scales better visually.

IMHO, that is not good idea.

Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.

And use max-width only for stuff that really benefit from it. Like
paragraphs. Add you use bigger value than you think it is best, as there
is differences between people, and there is no proof that short column
are easier to read, when difference is huge. (there is studies about
subject somewhere in internet, I think I have seen 2 at least.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Uncle Pirate]

Dan V. wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as min.
and 1024 x 768 resolution as a max?

Ideally the layout would be centered so it scales better visually.

This would be great for me.

Thanks,
Dan V.

FAQ. Next time, do some searching first.

Why limit to the resolutions you mentioned? A fluid layout would work
on both resolutions as well as smaller/bigger.

What you are looking for is (WARNING, untested off the top of my head):

<h1>Heading content</h1>
<div style="width:xx%;float:left">
(left column content)
</div>
<div style="width:xx%;float:left">
(right column content)
</div>
<div style="clear:both">
(footer content)
</div>

What I've put here is the minimal amount of css to do what you've asked
about. Flavor to taste and although I used inline styling, it's better
to use an external style sheet for most things as it works for an entire
site then.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Dan V. wrote:

I kind of forget about IE 5 as I am new and I want to know the basics before
any hacks.
That's not bad idea at all. As I said, the example is old. Nowadays I
wouldn't care about IE5...
If I use this code (with thanks) how can I have the content in the 2nd
'column' stretch only to say 700 px max. (Max-width is the only way that I
am aware - but I don't know how many browsers support this for a div.)
max-width is supported quite well, if it is supported. IE don't support
it, but there is work around. Google for max-width for ie

You don't want to limit it to 700px
Some of the content will look 'silly' if it stretches past 1024 x 768
resolution.
People that run their browser in over that size often use bigger font
size too. So use something like max-width:60em;

If you have mixed content (images and text), only apply max-width to
text. I have seen far too many times that floated images are forced to
too small space, and other way around, because using incompatible units.
I guess I could assume people won't choose silly widths..?

That is not bad idea either.

[FU deleted. Don't top post.]
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[KiwiBrian]

"Uncle Pirate" <st**@surecann.com> wrote in message
news:42********@nntp.zianet.com...

What you are looking for is (WARNING, untested off the top of my head):

<h1>Heading content</h1>
<div style="width:xx%;float:left">
(left column content)
</div>
<div style="width:xx%;float:left">
(right column content)
</div>
<div style="clear:both">
(footer content)
</div>

What I've put here is the minimal amount of css to do what you've asked
about. Flavor to taste and although I used inline styling, it's better to
use an external style sheet for most things as it works for an entire site
then.

What would be the minimum variation of the above that would give a
fixed-width left column, and a fluid right column?

Brian Tozer

[mscir]

Dan V. wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as min.
and 1024 x 768 resolution as a max?
Ideally the layout would be centered so it scales better visually.
This would be great for me.
Thanks,
Dan V.

How about this?

http://wellstyled.com/files/css-2col.../example2.html

Mike

[Uncle Pirate]

KiwiBrian wrote:

"Uncle Pirate" <st**@surecann.com> wrote in message
news:42********@nntp.zianet.com...

What you are looking for is (WARNING, untested off the top of my head):

<h1>Heading content</h1>
<div style="width:xx%;float:left">
(left column content)
</div>
<div style="width:xx%;float:left">
(right column content)
</div>
<div style="clear:both">
(footer content)
</div>

What I've put here is the minimal amount of css to do what you've asked
about. Flavor to taste and although I used inline styling, it's better to
use an external style sheet for most things as it works for an entire site
then.

What would be the minimum variation of the above that would give a
fixed-width left column, and a fluid right column?

Not sure about minimum but take a look at the link mscir posted. Nice
and simple.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

[Richard]

On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:

How do you do a css 2 column layout with header and footer, with the
2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as
min.
and 1024 x 768 resolution as a max? Ideally the layout would be centered so it scales better visually. This would be great for me. Thanks,
Dan V.

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 {width:auto: height:768px; float:left;}

<div class="box1">
<div class="col1">xxxxxxxxx</div>
<div class="col2">yyyyyyyyyy</div>
</div>

[Brian]

Richard wrote:

On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:

How do you do a css 2 column layout with header and footer

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 {width:auto: height:768px; float:left;}

There are no HTML elements "box1", "col1", and "col2". Your syntax is
bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)
<div class="box1">
<div class="col1">xxxxxxxxx</div>
<div class="col2">yyyyyyyyyy</div>
</div>

You obviously didn't test your code. I'd ask why, but I've already
killfiled you.

HAND

--
Brian

[mscir]

Brian wrote:

Richard wrote:

On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:

How do you do a css 2 column layout with header and footer

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 { width:auto: height:768px; float:left;}

There are no HTML elements "box1", "col1", and "col2". Your syntax is
bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)

<div class="box1">
<div class="col1">xxxxxxxxx</div>
<div class="col2">yyyyyyyyyy</div>
</div>

You obviously didn't test your code. I'd ask why, but I've already
killfiled you.
HAND

They're classes, just place a "." before each of them. I'm surprised you
didn't pick up on that. Sometimes I post quickly and overlook small
details too.

..box1 { width:1024px; height:768px; }
..col1 { width:auto; height:768; float:left;}
..col2 { width:auto: height:768px; float:left;}

Mike

[peter]

On Sat, 26 Feb 2005 17:41:51 -0800, mscir <ms***@yahoo.com> wrote:

Brian wrote:

Richard wrote:

On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:

How do you do a css 2 column layout with header and footer

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 { width:auto: height:768px; float:left;}

There are no HTML elements "box1", "col1", and "col2". Your syntax is
bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)

<div class="box1">
<div class="col1">xxxxxxxxx</div>
<div class="col2">yyyyyyyyyy</div>
</div>

You obviously didn't test your code. I'd ask why, but I've already
killfiled you.
HAND

They're classes, just place a "." before each of them. I'm surprised you
didn't pick up on that. Sometimes I post quickly and overlook small
details too.

.box1 { width:1024px; height:768px; }
.col1 { width:auto; height:768; float:left;}
.col2 { width:auto: height:768px; float:left;}

Mike

Following this discussion with huge interest - it is almost exactly
the help I need but with a slight difference

If they were a <div>element with an id attribute instead of classes,
and the left column needed to contain a background image (no repeat) ,
and located under the image a background colour of back was required
that had a width of around 5% less width of the actual background
image above it -

And the left column needs to be the same depth as the right column
(content dependant)
how would that be achieved?

http://4wdnz.net/css is as far as I have got - tearing my hair out now
:-(

tks in advance
Peter

[peter]

On Sun, 27 Feb 2005 17:12:02 +1300, peter <ra******@gmail.com> wrote:

all resolved

P

On Sat, 26 Feb 2005 17:41:51 -0800, mscir <ms***@yahoo.com> wrote:

Brian wrote:

Richard wrote:

On Fri, 25 Feb 2005 10:51:46 -0500 Dan V. wrote:

> How do you do a css 2 column layout with header and footer

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 { width:auto: height:768px; float:left;}

There are no HTML elements "box1", "col1", and "col2". Your syntax is
bogus. Even corrected, the code is bogus. (Why set dimensions in pixels?)

<div class="box1">
<div class="col1">xxxxxxxxx</div>
<div class="col2">yyyyyyyyyy</div>
</div>

You obviously didn't test your code. I'd ask why, but I've already
killfiled you.
HAND

They're classes, just place a "." before each of them. I'm surprised you
didn't pick up on that. Sometimes I post quickly and overlook small
details too.

.box1 { width:1024px; height:768px; }
.col1 { width:auto; height:768; float:left;}
.col2 { width:auto: height:768px; float:left;}

Mike

Following this discussion with huge interest - it is almost exactly
the help I need but with a slight difference

If they were a <div>element with an id attribute instead of classes,
and the left column needed to contain a background image (no repeat) ,
and located under the image a background colour of back was required
that had a width of around 5% less width of the actual background
image above it -

And the left column needs to be the same depth as the right column
(content dependant)
how would that be achieved?

http://4wdnz.net/css is as far as I have got - tearing my hair out now
:-(

tks in advance
Peter

[Brian]

mscir wrote:

Brian wrote:

Richard wrote:

box1 { width:1024px; height:768px; }
col1 { width:auto; height:768; float:left;}
col2 { width:auto: height:768px; float:left;}

There are no HTML elements "box1", "col1", and "col2". Your syntax
is bogus. Even corrected, the code is bogus. (Why set dimensions in
pixels?)

You obviously didn't test your code.

They're classes, just place a "." before each of them.

Yes, I figured that part out.
I'm surprised you didn't pick up on that.
I did pick up on it. "Richard" <An*******@127.001> did not. My question
was why he didn't bother testing his code. A css checker would have
warned him of the bad syntax.
Sometimes I post quickly and overlook small details too.

.box1 { width:1024px; height:768px; }
.col1 { width:auto; height:768; float:left;}
.col2 { width:auto: height:768px; float:left;}

Ok, that passes syntax checking, but even that is bad advice. And, at
first glance, won't do what the op wanted, either.

--
Brian

[Christoph Paeper]

*Brian* <us*****@julietremblay.com.invalid>:

mscir wrote:

.col1 { width:auto; height:768; float:left;}

¯¯¯ Ok, that passes syntax checking,

It does?

--
"A wise man gets more use from his enemies than a fool from his friends."
Baltasar Gracian

[Brian]

Christoph Paeper wrote:

Brian:

mscir wrote:

.col1 { width:auto; height:768; float:left;}

¯¯¯

Ok, that passes syntax checking,

It does?

Oops, no it doesn't! (Or, as they say at Xmastime in England, "OH NO IT
DOESN'T!")

That just underscores my point, even if it also caught me out. ;-)

--
Brian