Hi,
I have an h2 tag and two spans that I want to all appear on the same line, the h2 text on the left, one of the spans in the middle and the other span on the right. If I wasn’t using an h2 then I know I’d be able to do:
<div style="text-align:center">
<span style="float:left">Text Left</span>
<span style="float:right">Text Right</span>
<span>Center Text</span>
</div>
Is there a way I can achieve that but with ‘Text Left’ in the example above in an h2 tag?
Cheers
I have found one method, it’s to float each element and then assign it a percentage width like so:
<div id="header">
<h2 style="float: left; width: 34%; text-align: left;">Text Left</h2>
<p style="float: left; width: 33%; text-align: center;">Text Middle</p>
<p style="float: left; width: 33%; text-align: right;">Text Right</p>
</div>
Is that the best method or is there a more elegant solution?
Well with your HTML set up like that, float one <span> left, float one <span> right, and give both of them like…a 20% width.
Then don’t float the 3rd span, but give it this: margin:0 20%;
It’s used in Pauls 3col layout technique.
Well with your HTML set up like that, float one <span> left, float one <span> right, and give both of them like…a 20% width.
Then don’t float the 3rd span, but give it this: margin:0 20%;
It’s used in Pauls 3col layout technique.
That’s the example I gave in the OP that only works for spans however it’s not spans that I’m trying to do it with. I’m trying to acheive the same thing but with an <h2> and two <spans>. This obviously doesn’t work in the first instance because the h2 will get pushed to a separate line.
Actually the example I gave does work. It doesn’t matter what the element is when you float it. All the same technique.
Ah my bad - you’re right, cheers 