Member Avatar for PopeJareth

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:

...
<body>
 <div class="tripletBox linkBlock">
	<p>
	Suggested Itinerary<br />
		Brochures
	</p>
</div>
<div class="tripletBox linkBlock">
	<p>
		Lesson Plans<br />
		Cool Sites
	</p>
</div>
<div class="tripletBox linkBlock">
	<p>
		Featured Images<br />
		Opportunities
	</p>
</div>
</body>

Here is the css applying to the html:

body {
   margin-left: auto;
   margin-right: auto;
   min-width:1020px;
   max-width:1020px;
   ...
}

.tripletBox{ 
float:left;
width:26.36%;
margin-left:3.48%;
margin-right:3.48%;

}


.tripletBox > * {/*centers images in the tripletBox container*/
   display:block;
   margin-left:auto;
   margin-right:auto;
}

.linkBlock {
     ...
     text-align:left;
}
  • 3 Contributors
  • 10 Replies
  • 162 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ingeva
Member Avatar for ingeva

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

You are using a "double" class:

<div class="tripletBox linkBlock">

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:

<div class="tripletBox">
<div class="linkBlock">
Your text
</div></div>

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.

Member Avatar for MidiMagic

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.

Member Avatar for ingeva

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

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

Member Avatar for PopeJareth

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

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 =)

Member Avatar for PopeJareth

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

.linkBlock p{
    margin-left:80px;
}

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?

Member Avatar for ingeva

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

.linkBlock p{
    margin-left:80px;
}

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.

Member Avatar for PopeJareth

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 =)

Member Avatar for ingeva

Thanks ingeva =)
Maybe it can be easier once css3 comes out =)

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

Member Avatar for MidiMagic

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

Member Avatar for ingeva

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

Well, what did I just do? :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.