CSS text alignment question | WPDFD.com Forums

Schomer said:

11/18/04, 323 45 2004 2004:%i:1100763936 02:45:36

Hi All,

I'm trying to get text inside a div box to align to the left, center, and right - something like this:

-------------------------------------------------------------------
| left text � � � � � � � � � � center text � � � � � � � � � �right text �|
-------------------------------------------------------------------

I tried breaking up each part of the text into a separate div, specifying them to be inline. That got everything to appear on one line. But I have not been able to get the alignment/spacing to happen at all.

Is this even possible with CSS?

Thanks,
Schomer

Joe Gillespie said:

11/18/04, 323 20 2004 2004:%i:1100773257 05:20:57

The easy way to do it would be to set the text to justify and then

left text center text right

Putting a non-breaking space between words makes the sentence one big word.

Otherwise, you would need three nested, float left, divs - one text-align: left, one text-align: center, one text-align: right

Schomer said:

11/18/04, 323 44 2004 2004:%i:1100832262 21:44:22

I tested your idea about three nested divs, but the text-align attribute only works on the contents of those divs, not the divs themselves, so I wasn't able to get it to work. Also, I wasn't sure what you meant about floating all three left and how that would do anything but stack them up with a left alignment.

I did some messing around and came up with the following:

#container {
border: 1px solid #333;
margin: 100px;
text-align:center;
}
#left {
display: inline;
float: left;
}
#center {
display: inline;
}
#right {
display: inline;
float: right;
}

The first important thing I realized was the need to give the container div a text-align:center. This centers the three divs inside.

From there, setting all three of the inside divs to display:inline makes them appear on one line.

Lastly, on the left div I did float:left, and on the right div, I did float:right.

This seemed to give me exactly what I was looking for - although, I have only tested it in Safari at this point...

Does this look like a decent way to do this?

Joe Gillespie said:

11/19/04, 324 53 2004 2004:%i:1100843581 00:53:01

This is how I would do it...

(If you want the border around everything, you will have to specify some heights.)


        "http://www.w3.org/TR/html4/loose.dtd">


      
      Untitled
      
      


left text
center text
right text