I am working on a page that has 3 columns of text. I am trying to center the text in each column while maintaining the left justification for the text.

When I try to use margin-left:auto; margin-right:auto; the spacing for the columns is destroyed. I have also tried putting a div around the paragraphs and tried to center that, but either I am doing something wrong or it isn't affecting anything.

Here is a link to a page that shows the text and how they are not working. http://pages.suddenlink.net/salisburra/index2.html

Thanks so much for any help you can provide =)


This is the html from the page:

Here is the css applying to the html:

I think I understand what you're trying to do.

You are using a "double" class:

I don't think you can do that.

I think you should define 3 DIVS, for instance width 33% for each.
Keep the "margin:auto" definitions.
Inside each of them, place a new block where the text-alignment is "left".
For instance:
Other suggestion: Remove the definition of body width. The body should fill the window, and it will if you omit it.


I haven't tried this, but I think it should work.

I use multiple classes all the time. As long as they don't contradict each other, it works great.

Use text-align: center; to center text. The margin works on everything else, but not text.

Remember that any surrounding styles (margin, border, padding) are rendered OUTSIDE any size style (width, height) you define. So you need to leave extra room for the surrounding styles to fit into.

OK! I'll take that as a tip. Wouldn't have thought it was possible. You learn something every day.

That was my first attempt, but using text-align:center made the text center but with out a left justified look

ex

instead of


I also feel that Ingeva's idea should work, but when I actually implement that, nothing changes.

Thanks again for your help =)

I think I have come up with a small hackjob of a solution. If I add

Then the text is lined up with their above headers, and nothing strange is happening with the floating divs.

What do you guys think about this (slightly tacky) solution?

I'm sorry I haven't looked at this. It might work.
But I think I wasn't clear enough in my first post.
If I may say so, your stylesheets looked like overkill, but I realize
that you also have other things in mind with your HTML.

I have re-written your HTML and stylesheet a little. I've used borders and background colors to indicate "what's what". I ignored the text images and use text instead. You can use images of course, but text is faster and more elegant. You can still use varying colors.

I try to avoid fixed sizes, like font sizes in pixels. I do that only once: in the body style. Otherwise I specify sizes as "em" or percent. With my example, vary the width of the window and see how everything follows. This reduces horizontal scrolling, but be aware that you can get some folding of DIVs that are too wide in a narrow window.

A design should be as simple as possible. Here I ended up with 4 levels of DIV, which I really think is too much, but an easier option (to write) is with a table, and that's not always considered "kosher".

My suggestion can be found here:

http://intertrafico.com/helper

Hope you can make it work just the way you want it.

Thanks ingeva =)

This works wonderfuly. Too bad there isn't a simpler soultion. (that is concidered "kosher")

Maybe it can be easier once css3 comes out =)

Let's hope so!
Maybe someone else can simplify this, even before CSS3!

Put the text in a container, and center the container.