469,270 Members | 1,097 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

4 centered columns

I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?

Jun 25 '07 #1
9 1818
In article
<11**********************@j4g2000prf.googlegroups. com>,
alice <al***@fearofdolls.comwrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?
(1) Try: <http://www.glish.com/css/8.asp>

(2) If you want to float divs, you will have difficulty centering
without using some javascript. I am sure it would be fine to use
it for the purpose of centering things as your page would still
be fine (just not centered) for those without js.

In a different context but not that different, I used some
javascript called bootnic.js to get this working.

<http://tinyurl.com/2jsoe5>

Principle would be the same.

(3) Make life easy for yourself in the short term at least and
use a 4 col table where centering is easy and the design most
stable. (I'm out of here, I can feel the charge of the heavy
brigade coming...)

--
dorayme
Jun 25 '07 #2
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11**********************@j4g2000prf.googlegroups. com>,
alice <al***@fearofdolls.comwrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
....
(2) If you want to float divs, you will have difficulty centering
without using some javascript. I am sure it would be fine to use
it for the purpose of centering things as your page would still
be fine (just not centered) for those without js.

In a different context but not that different, I used some
javascript called bootnic.js to get this working.

<http://tinyurl.com/2jsoe5>

Principle would be the same.
Just a little follow up on this point. Take a look at:

<http://tinyurl.com/2fb9fm>

Just a quick slap up of 4 cols, not quite 25% (actually I did not
quite understand your requirement. If each col is 25%, how can
either each or the whole lot be centred? What's to centre? (I
hope not the text within each col?)

--
dorayme
Jun 25 '07 #3
On 2007-06-25, alice wrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.
Margins, padding, and borders are added to the specified width.
Make the width a litle less, then add the extras.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.
Apart from the obvious (blaming IE), you could try a container
division.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?
Provide a URL.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Jun 25 '07 #4
On Jun 24, 11:58 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com>
wrote:
On 2007-06-25, alice wrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.

Margins, padding, and borders are added to the specified width.
Make the width a litle less, then add the extras.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.

Apart from the obvious (blaming IE), you could try a container
division.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?

Provide a URL.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
I guess I'm not sure how to center that container div, that's what I'm
asking. I've tried the text-align: center, but that only centers the
text, not what I want.

Jun 25 '07 #5
On Jun 24, 10:18 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<doraymeRidThis-7B97D0.14551325062...@news-vip.optusnet.com.au>,

dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1182742862.074531.305...@j4g2000prf.googlegroups. com>,
alice <a...@fearofdolls.comwrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-

...
(2) If you want to float divs, you will have difficulty centering
without using some javascript. I am sure it would be fine to use
it for the purpose of centering things as your page would still
be fine (just not centered) for those without js.
In a different context but not that different, I used some
javascript called bootnic.js to get this working.
<http://tinyurl.com/2jsoe5>
Principle would be the same.

Just a little follow up on this point. Take a look at:

<http://tinyurl.com/2fb9fm>

Just a quick slap up of 4 cols, not quite 25% (actually I did not
quite understand your requirement. If each col is 25%, how can
either each or the whole lot be centred? What's to centre? (I
hope not the text within each col?)

--
dorayme
I guess by center what I really mean is, all 4 columns equal width and
no space on the right side, which is what would happen normally.

Jun 25 '07 #6
On Jun 24, 11:58 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com>
wrote:
On 2007-06-25, alice wrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.

Margins, padding, and borders are added to the specified width.
Make the width a litle less, then add the extras.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.

Apart from the obvious (blaming IE), you could try a container
division.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?

Provide a URL.
www.fearofdolls.com/4columns.html

I guess I can try the javascript, but I was hoping for a more
definitive answer as to why not, or if, IE can have 4 divs at
25%...why does that add up to more than 100% even without any margins
or padding?
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Jun 25 '07 #7
On Jun 25, 9:56 am, alice <a...@fearofdolls.comwrote:
On Jun 24, 11:58 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com>
wrote:


On 2007-06-25, alice wrote:
I've been slowly learning CSS, but wanting to jump ahead and get a
page to have 4 columns of text that are centered on the page, no
matter how big the monitor/browser/window, I'd like each one to resize
and take up 25% of the screen space.
Strange things have been happening since trying to do this-
First, I can't figure out how to center any of this except by putting
them all in a <centertag, which I've heard is not what one is
supposed to do any more, so what can I use?
Second, I thought I could accomplish everything by setting the width
of the columns in the style sheet to be 25%. This worked for a
fleeting moment, but when I added a small margin, it stopped working -
the 4th column is not fitting on the screen.
Margins, padding, and borders are added to the specified width.
Make the width a litle less, then add the extras.
So I got rid of the margin, but still it will not fit. Except in
Firefox. In IE it will not, even though it did the first time. Now it
will only fit if I change the size to 24%, but then there will be a
small space to the right, not a big deal, but there must be a proper
way to do all this, and a reason that IE cannot fit 4 25% divs on the
screen.
Apart from the obvious (blaming IE), you could try a container
division.
The divs are floated left, and have no setting for clear, but I've
tried all the setting on these just to see if it would make a
difference, but it does not.
Any suggestions?
Provide a URL.

www.fearofdolls.com/4columns.html

I guess I can try the javascript, but I was hoping for a more
definitive answer as to why not, or if, IE can have 4 divs at
25%...why does that add up to more than 100% even without any margins
or padding?
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -
Ok, this is strange, yesterday the columns would not fit, today they
do. And yes, the browser window was maximized the whole time.
Anyway, there must be a better way to center all this than javascript,
but how do I center the container div?

Jun 25 '07 #8
alice wrote:
>
I guess I'm not sure how to center that container div, that's what I'm
asking. I've tried the text-align: center, but that only centers the
text, not what I want.
div { margin: 0 auto; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jun 25 '07 #9
On Jun 25, 12:05 pm, Jim Moe <jmm-list.AXSPA...@sohnen-moe.comwrote:
alice wrote:
I guess I'm not sure how to center that container div, that's what I'm
asking. I've tried the text-align: center, but that only centers the
text, not what I want.

div { margin: 0 auto; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Doing that does not center the 4 divs within it. In fact, when I try
that on anything, it is not centered. It's strange to me how difficult
this really is...

Jun 25 '07 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

32 posts views Thread by Jocab | last post: by
2 posts views Thread by David Winter | last post: by
17 posts views Thread by Stian Lund | last post: by
reply views Thread by James Puffer | last post: by
9 posts views Thread by Chris Saunders | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.