> I want to be able to align the last part of a heading tag to the right,
> whilst the rest of it stays aligned to the left.
>
> For example:
>
> -----------------------------------------------------
> Description £ price
> -----------------------------------------------------
>
> In theory, I think you should be able to do that with a <span> within the
> <h1> tag that floats the last part of the heading to the right, i.e:
>
> <h1>Description <span class="right">£ price</span></h1>
>
> .right {float: right;}
>
> However, this doesn't work as is and adding other refinements such as the
> width parameter and so on still doesn't work across all browsers. Nor does
> creating a separate .left class for the first part of the heading.
>
> The <h1> tag has a background colour assigned to it and the <span> tags seem
> to put a white background over the heading which ruins the effect, even if
> they do position the text in the right place.
Without seeing what you are doing this is tricky. What I normally tend
to do in these instances is that I position the H1 relative and block
and position the span absolutely in it:
h1{position:relative;background:#ccc;}
h1 span{position:absolute;right:0;}
<h1>bla<span>bla2</span></h1>
If you need floating, float the main element (that will ensure it
contains the others) and use two spans:
h2{float:left}
h2 span{float:left;}
h2 span.price{float:right;}
<h2><span>bla</span><span class="price">bla2</span></h2>
--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
______________________________________________________________________
css-discuss [css-d-FPEHb7Xf0XVf4fvhJAioeSCwEArCW2h5@xxxxxxxxxxxxxxxx]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
|
