What would be the best way to create a <h1> tag over three lines where the top line is aligned left, the middle line justified and the bottom line aligned right without using <br>
Thank you in advance
This is why I love SPF. At least now I have something to choose from. 
Thanks a lot noonnope, Paul O’B, xhtmlcoder and Erik J :tup:
<span> comes to mind. But it would rely on CSS. But then CSS is a must for those specific text lines alignments.
I would probably use <br> too for, at least, break the lines when no author CSS available. But I would offCSS-it and use spans as hooks.
Hi,
I would do something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:center;width:760px;margin:auto}
span,b{display:block;text-align:left}
b{text-align:right}
</style>
</head>
<body>
<h1><span>Left</span>Middle<b>Right</b></h1>
</body>
</html>
Or if you don’t like the non semantic b element then do this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:center;width:760px;margin:auto}
span,b{display:block;text-align:left}
.r{text-align:right}
</style>
</head>
<body>
<h1><span>This heading</span> is Split <span class="r"> over 3 lines</span></h1>
</body>
</html>
I see no point for breaks as this is a heading and you are creating a visual effect for the text in that heading. If it’s not a heading then an h1 is the wrong element.
Hi noonnope! Thanks for that. Would it be to much asked if I ask you to give an example of what you mean using a width of 760px;?
That what I was looking for Paul. Thank you so much. :tup:
The first one was right to the point. About the semantic! I remember a thread some days ago where semantic was quite some times confused with structure by some members. So I’m okay with the first option
Since I’m using CSS 2.1 w/ disregard for IE6 issues, I would start from this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 {
width:760px;
margin:auto;
border:1px solid black;
}
h1 span {
display:block;
text-align:center;
}
h1 span+span {
text-align:right;
}
</style>
</head><body>
<h1>This heading<span> is Split </span><span>over 3 lines</span></h1>
</body></html>
This code will make for a slightly incomplete IE6 user experience. Fine with me. It’s their situation, my code STILL makes for a satisfactory UX.
Hmm, yes the B would probably be out of place on the most important element on the page. You could do triplicate but it probably wouldn’t make much sense.
@Paul O’B: It is a heading indeed! I would never would use such a tag on places it won’t belong
I finally opted for noonnope’s option using the two spans. Considering that site owner gave me a free hand in which browsers to serve.
This code will make for a slightly incomplete IE6 user experience.
Shame on you I still have IE6 on my laptop.
It’s you and your laptop who should be ashamed ! Mine’s got W7 and eagerly awaits FF 4. It asked me not to put any crap in it anymore or it’ll retire!
Yes but he only showed you his after I showed you mine
Yeah, but I mentioned <span> first 
Actually, it’s true. I stole mark-up from you. And it’s obvious, since I prefer html 4.01. But I was at work, and Friday it’s a short work day…
Though I think you’ve noticed I went a whole different way, mark-up and CSS (apart from the obvious stealing part, of course )
In the OP you wanted the middle line justified.
Here is a justified middle line version. Old IE will just differ by the middle line left aligned I think (have only access to FF 3.6 ftm).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1{
margin:auto;
border:dotted;
width:80%;
line-height:1.2;
text-align:right;
}
h1 span{
display:block;
text-align:left;
}
h1 span+span{
float:left;
margin:0 0 -1.2em;
width:100%;
text-align:justify;
word-spacing:-.2em;
}
h1 span+span:after{
margin-left:99%; /* creates a linebreak to justify middle (N.B keep that trailing space in the html) */
content:".";
visibility:hidden;
}
</style>
</head><body>
<h1><span>Left Left </span><span>Justified Justified Justified Justified Middle </span>Right Right</h1>
</body></html>
Trust Erik to go one better
Here’s my simpler version that lets IE6 play (but not justified text of course)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:right;width:760px;margin:auto}
span{display:block;text-align:left}
span span{text-align:center;}
</style>
</head>
<body>
<h1><span>This heading <span>is Split</span></span> over 3 lines</h1>
</body>
</html>
I wonder how much mileage we can get out of this topic
Hmmm…
Interesting. I don’t think though that :after is supported in IE lt 9. And it goes out of boundaries.
Nice one Paul! It’s comming on pretty good now
Here’s my response, IE6 supported, thanks to Paul’s idea: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 {
width:760px;
margin:auto;
border:1px solid black;
}
h1 span {
display:block;
text-align:center;
}
h1 span span {
text-align:right;
}
</style>
</head><body>
<h1>This heading<span> is Split <span>over 3 lines</span></span></h1>
</body></html>
Interesting concept, Paul ! With nesting to overcome the sibling CSS selector IE6 has problems with. I like it ! Really, really like it ! I guess now <b> days are really over ?!
But, (and even more) for when IE6 is no longer, I would still opt for the span+span instead of nesting It’s seems more… natural for the mark-up.
No worries, it was just my poor attempt at a joke
span+span instead of nesting
Yes, I agree the adjacent selector is a great tool and allows for more natural mark up.
IE8 does support the pseudo :after element as seen in this example.
You may have been thinking about :last-child which is not supported in IE8.
I guess now <b> days are really over ?!
Maybe in this h1 example they are, but when it comes to sandbags in list-items and vertical-align workarounds I will still be using them before I use a span with a class.