Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

why does'nt my text-align:justify work?

Status
Not open for further replies.
csphard

csphard

Programmer
Apr 5, 2002
194
US
why does'nt my text-align:justify work?

text-align: right, text-align:center and text-align:left work. What am I missing about the text-align:justify?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body{font-family:courier;text-transform:uppercase;text-align:center;}
body,h1,h2,h3,h4,h5,h6,span,ul,li {margin:0;padding:0;}
#container {text-align:left;margin:0 auto;width:600px;border:50px solid black;}
header h1 {color:blue;}
header span {display:none;}
#content {background-color:black;color:white;font-size:60px;width:600px;border:5px solid

white;letter-spacing:15px;text-align:justify;}
footer h1 {color:blue;}
footer span {display:none;}
</style>
</head>
<body>
<div id="container">
<header><h1><span>header</span></h1></header>
<div id="content">
<h2>design</h2>
<h2>within</h2>
<h2>reach</h2>
</div>
<footer><h1><span>footer</span></h1></footer>

</div>
</html>

Thanks
Howard
 
Sort by date Sort by votes
csphard said:
text-align: right, text-align:center and text-align:left work. What am I missing about the text-align:justify?
Click to expand...

Content.

Justify works on paragraphs of text, you have none.

Basically justify makes all lines of equal length in a paragraph provided there is enough content for it to happen.

Your content div has 3 header elements which aren't a paragraph. Also since there's only one word there's no way for justify to align them because the way justify works is it adds spaces between works in such a way as to make the lines be of equal length. Provided there is enough text in the line for it to not make it to obvious its doing it.

It won't work in very short lines in relation to other lines, and it technically is only noticeable when you have several lines of text.

Headers (h1-h6) are block level elements and as such can't be justified, And in your case their contents are a single word so will not be justified either.



----------------------------------
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 & Tech
 
Upvote 0 Downvote
Thanks, I really appreciate your explaination. I went there and read the information from w3schools but it was not as clear as you were.

Thanks again.
 
Upvote 0 Downvote
Glad I could help.

----------------------------------
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 & Tech
 
Upvote 0 Downvote
Just to clarify something vacunita said, [tt]test-align:justify[/tt] does not only apply to paragraph elements. It'll apply to any element that has enough text in it to fill more than one line:
Code: 
<DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style>
  #content {text-align:justify;}
</style>
</head>
<body>
  <div id="content">
    <h1>This is way too much text to make a sensible heading, but if your browser window is narrow enough it <em>will</em> be justified</h1>
  </div>
</body>
</html>
It's just that it only really makes sense to apply [tt]text-align:justified[/tt] to paragraphs of text - headings aren't usually long enough to be justified, and when they are they generally look terrible.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
158
jjgupta915
jjgupta915
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
117
coldbohemia
coldbohemia
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
143
ChrisHirst
ChrisHirst
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
228
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top