Layout: CSS text alignment question

started by Schomer on Nov 18, 2004 — RSS Feed

Schomer Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

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 Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

This is how I would do it...

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <title>Untitled</title>
     
     <style type="text/css" title="text/css" media="all">
<!--
#container
{
margin: 100px;
}

#left
{
float: left;
text-align: left;
width: 33%;
background-color: red;
}

#center
{
float: left;
text-align: center;
width: 33%;
background-color: yellow;
}

#right
{
float: left;
text-align: right;
width: 33%;
background-color: blue;
}
-->
</style>
</head>
<body>
<div id="container"><div id="left">left text</div><div id="center">center text</div><div id="right">right text</div>
</div>

</body>
</html>

Maskodok Eko Maskodok Eko
Posts: 171

TOP SEO | Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply