three columns with CSS

[Bazley]

CSS is unbelievably unwieldy. All I want to do is have a page with
three columns. The left and right columns should be fixed width and
the central column should adjust its width to fill in the remaining
space. Such a simple concept is, I believe, virtually impossible to
code. If anyone can do it I would be very impressed.

 

[A-OK-SITE]

CSS is unbelievably unwieldy. All I want to do is have a page with
three columns. The left and right columns should be fixed width and
the central column should adjust its width to fill in the remaining
space. Such a simple concept is, I believe, virtually impossible to
code. If anyone can do it I would be very impressed.

Bazely,

Try this it lays it out in a step by step easy to understand format.

http://a-ok-site.com/webdesign/xhtml_basics/ch10.pdf

To center on the page set the container div margin to auto.

#samplediv {margin:auto;}

For more help see

http://a-ok-site.com/webdesign/index.html


Daniel

http://a-ok-site.com

 

[A-OK-SITE]

Bazely,

Try this it lays it out in a step by step easy to understand format.

http://a-ok-site.com/webdesign/xhtml_basics/ch10.pdf

To center on the page set the container div margin to auto.

#samplediv {margin:auto;}

For more help see

http://a-ok-site.com/webdesign/index.html

Daniel

http://a-ok-site.com

Bazley,

Sorry for the typo on your name.

Since that is how my website is set up let know if you have any
problems.

Daniel

Http://a-ok-site.com

 

[A-OK-SITE]

CSS is unbelievably unwieldy. All I want to do is have a page with
three columns. The left and right columns should be fixed width and
the central column should adjust its width to fill in the remaining
space. Such a simple concept is, I believe, virtually impossible to
code. If anyone can do it I would be very impressed.

Bazley,

Sorry for the typo on your name.

Since that is how my website is set up let know if you have any
problems.

Daniel

http://a-ok-site.com

 

[Nik Coughlin]

CSS is unbelievably unwieldy. All I want to do is have a page with
three columns. The left and right columns should be fixed width and
the central column should adjust its width to fill in the remaining
space. Such a simple concept is, I believe, virtually impossible to
code. If anyone can do it I would be very impressed.

http://www.nrkn.com/3ColEqualPositioned/

 

[rf]

Bazely,

Try this it lays it out in a step by step easy to understand format.

http://a-ok-site.com/webdesign/xhtml_basics/ch10.pdf

A power point presentation inside a pdf? Surely you jest. This is the web
not the boardroom.

 

[A-OK-SITE]

A power point presentation inside a pdf? Surely you jest. This is the web
not the boardroom.

Why would you care, I made it for a class and just converted it to
pdf. If you don't like it, stay the away from my web site. Is that
simple enough for you to understand.

Daniel

http://a-ok-site.com

 

[SigelsTankMage]

http://www.glish.com/css/7.asp

 

[rf]

Why would you care,

I would care because you are trying to palm off this pdf as usefull
information to the OP and to this newsgroup at large.

I made it for a class and just converted it to
pdf.

Right. The OP breezes in to your pdf expecting to be enlightened on how to
build a three column layout. OP finds the relevant example on page 18 out of
28, after a sequential search because there is no table of contents in your
pdf and there are no links anywhere.

Great, thinks OP, and scrolls down to look at the next page, page 19, where
OP is told to
"Review the CSS on threecolumn.htm from the Student Files."

What bloody student files? This whole exercise has been a total waste of
time for the OP. Why did you even post a link to such useless rubbish.

If you don't like it, stay the away from my web site. Is that
simple enough for you to understand.

And I'll extend this invitation to stay away from your web site to everybody
else. There is no point in visiting a link to a pdf from A-OK-SITE because
you will not learn anything, and *every* link opn the "web design" page is a
link to a pdf.

He's a damn google grouper as well!.

 

[Jukka K. Korpela]

Scripsit Nik Coughlin:

http://www.nrkn.com/3ColEqualPositioned/

I think the page nicely demonstrates what Bazley wrote, at least the
"unwieldy" part. It uses fairly complicated tricks to achieve a simple
layout that virtually anyone familiar with HTML basics could code in a
minute using a simple HTML table. Which approach is easier to apply?
Easier for maintenance? Easier to understand when you're reading someone
else's code?

(Besides, the page cheats by using IE-specific quite nonstandard CSS
features, which are effectively kind of client-side scripting.)

 

[Beauregard T. Shagnasty]

CSS is unbelievably unwieldy.

Only until you develop the mindset to use it.

Then you will wonder why you waited so long...

 

[rf]

I would care because you are trying to palm off this pdf as usefull
information to the OP and to this newsgroup at large.

Hmmm. I must have offended Mr Site. He appears to have removed his posts in
this thread from googles archive, picked up his bat and ball and gone home.

Little does he know that these posts remain on usenet servers around the
world for months to come

 

[usenet.sucks]

Hmmm. I must have offended Mr Site. He appears to have removed his posts in
this thread from googles archive, picked up his bat and ball and gone home.

Little does he know that these posts remain on usenet servers around the
world for months to come

Mr. Site thinks you are a stupid prick. He also thinks usenet sucks.

usenet.sucks

 

[asdf]

CSS is unbelievably unwieldy. All I want to do is have a page with
three columns. The left and right columns should be fixed width and
the central column should adjust its width to fill in the remaining
space. Such a simple concept is, I believe, virtually impossible to
code. If anyone can do it I would be very impressed.

Ok, here goes....

I've given the center column a background colour, and the two outer columns
a border so you can see how it fills the space. You need to play around with
margins and paddings to suit your application, but this should point you in
the general direction ok...

Two minute job:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Column CSS layout</title>
<style type="text/css">
<!--

#leftcol, #rightcol {
width: 150px;
border: 1px solid #E0DFE3;
}
#leftcol {
float: left;
}
#rightcol {
float: right;
}
#centercol {
margin-left: 150px;
margin-right: 150px;
background-color: #E0DFE3;
border: 1px solid #E0DFE3;
}
-->
</style>
</head>

<body>
<div id="leftcol">Here's your left column </div>

<div id="rightcol">Here's the right column</div>
<div id="centercol">Here's the middle bit.</div>
</body>
</html>

 

[Nik Coughlin]

Scripsit Nik Coughlin:


I think the page nicely demonstrates what Bazley wrote, at least the
"unwieldy" part. It uses fairly complicated tricks to achieve a simple
layout that virtually anyone familiar with HTML basics could code in a
minute using a simple HTML table. Which approach is easier to apply?
Easier for maintenance? Easier to understand when you're reading someone
else's code?

That's true Jukka, if a table is easier if you want equal height columns.
However, non-equal height columns of the type Bazley needs are trivial. I
intended to point that out as well, but I got distracted by work so ended up
leaving my post as above.

(Besides, the page cheats by using IE-specific quite nonstandard CSS
features, which are effectively kind of client-side scripting.)

Yes, yes it does. Unfortunate that.

 

[Beauregard T. Shagnasty]

Mr. Site thinks you are a stupid prick. He also thinks usenet sucks.

usenet.sucks

NNTP-Posting-Host: 70.233.163.11

Google Groups sucks a whole lot more...

 

[dorayme]

Hmmm. I must have offended Mr Site. He appears to have removed his posts in
this thread from googles archive, picked up his bat and ball and gone home.

Little does he know that these posts remain on usenet servers around the
world for months to come

Well that is good because I was getting pretty tired of his
idiotic attacks on people he did not understand.

He was about to be introduced to Jerry Stuckle in my killfile.
And my killfile is not like any other. I have a vast store of
personal experience about these and have found loopholes and
flaws in their design that have enabled me to settle in very
comfortably, to study quietly with all the things one needs for
solitary and productive reflection in them all.

Armed with such experience, I designed my own kf with no
loopholes, no comforts, and terrible plumbing.

 

[rf]

Well that is good because I was getting pretty tired of his
idiotic attacks on people he did not understand.

I had only started to notice him before he had a go at me for having a go at
his pdf.

Just noticed that he has taken his list of pdfs down, including a page that
was about C++. Must have been really cranky, especially to morf into the
usenet.sucks troll. Can you see him stalking me across usenet?

That actually bears clarifying. A-OK-SITE (aka (e-mail address removed)) has
morfed into (e-mail address removed).

 

[owo.dod]

Well that is good because I was getting pretty tired of his
idiotic attacks on people he did not understand.

He was about to be introduced to Jerry Stuckle in my killfile.
And my killfile is not like any other. I have a vast store of
personal experience about these and have found loopholes and
flaws in their design that have enabled me to settle in very
comfortably, to study quietly with all the things one needs for
solitary and productive reflection in them all.

Armed with such experience, I designed my own kf with no
loopholes, no comforts, and terrible plumbing.

Kill files are for morons like you.

 

[owo.dod]

I had only started to notice him before he had a go at me for having a go at
his pdf.

Just noticed that he has taken his list of pdfs down, including a page that
was about C++. Must have been really cranky, especially to morf into the
usenet.sucks troll. Can you see him stalking me across usenet?

That actually bears clarifying. A-OK-SITE (aka (e-mail address removed)) has
morfed into (e-mail address removed).

You ever think it is you with the problem. You seem to be a real punk.