Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login
Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Tek-Tips LinkedIn® Group

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...Within the first afternoon I found 2 of the 3 needed solutions, and the 3rd came to me over the weekend!..."
More...

Geography

Where in the world do Tek-Tips members come from?
Click Here To Find Out!

Tek-Tips Shirts!

Get Tek-Tips Swag
Get your
Tek-Tips Forums
SWAG here!
Home > Forums > Programmers > Web Development > HTML, XHTML & CSS Forum

Why does'nt text-align:justify work? Help

thread215-1690560
Read More Threads Like This One
csphard (Programmer)
11 Aug 12 23:36
Not sure why text-align: justify does not work?

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
ul,li,h1,h2,h3,h4,h5,span,body {margin:0;padding:0;}
body {font-family:tahoma;text-align:center;}
#container {width:600px;margin:0 auto;border:10px solid black;padding: 5px;text-align:left;}
#header h1 {text-align:left;}
#content {text-align:center;}
#content2 {text-align:justify;}
#footer h1 {text-align:right;}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>testing align left</h1></div>
<div id="content"><h1>testing align center</h1></div>
<div id="content2"><h1>testing align justify</h1></div>
<div id="footer"><h1>testing align right</h1></div>
</div></body></html>
vacunita (Programmer)
12 Aug 12 0:32
Justifying modifies the spaces between words so that all lines in a text are of equal length, cover all the available space, and have even margins. 3 words in a div will not show the effect of justification at all.

Not sure what you were expecting to see there.

Put in several lines of text and you'll probably see the effect.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

OlafDoschke (Programmer)
12 Aug 12 5:02
It would indeed help to tell you what you need to change, if you'd also tell us, what you expect to see or happen.

If you rather want centering than block formatting text, you rather will want to use css style margin:auto. Besides browsers still understand <center>...</center> and while that won't validate for most doc types, it will work.

Bye, Olaf.
OlafDoschke (Programmer)
12 Aug 12 5:17
Depnding on which browser you use, you find developer tools, eg CSS inspector telling you what CSS is actively used at a selection of html.

My guess: Your <div id="content2"> has no width defined, therefor the h inside is just taking the place it takes to write the heading and so you won't see expanded space between the three words, even though you have set margin:auto on the outer div id container.

Bye, Olaf.
ChrisHunt (Programmer)
13 Aug 12 5:34
text-align:justify is working, just not the way that you expect it to.

When you tell the browser to display a block of text justified, it pads out complete lines with extra whitespace to fill the complete width of the block. If the last (or only) line isn't long enough to fill a line, it is displayed at normal spacing.

This is the right way to do it. Consider a paragraph of text set to justified alignment. The last line might only have two words in it - it'd look really weird to display them at opposite ends of the block:


This is an example of some text
that has been displayed in a
justified style. If you apply
the justified approach to the
last line of the text it looks
really odd!

-- Chris Hunt
Webmaster &amp; Tragedian
Extra Connections Ltd

csphard (Programmer)
13 Aug 12 11:21
Thanks. I appreciate your help.

Howard
ChrisHunt (Programmer)
13 Aug 12 16:23
Gah! my "justified" text worked in the preview - but you get the idea

-- Chris Hunt
Webmaster &amp; Tragedian
Extra Connections Ltd

OlafDoschke (Programmer)
14 Aug 12 8:06
Chris,

I share the pain, the new tek-tips editor is still having a couple of issues. But your point still comes over. I should also have thought about that, you can't of course justify a single line, even if a total width is defined.

Bye, Olaf.
Read More Threads Like This One

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To HTML, XHTML & CSS

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close