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