15 replies [Last post]
cbichis
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+3
Joined: 2009-03-16
Posts: 12
Points: 15

Hello,

I have one paragraph and i want to display part of paragraph right aligned.

The part i want to be right aligned is the one contained into span.tags. This should be displayed on the right side of "By: Author / Company"

If i style the span.tags {float:right;} in IE i got the text floating on right side of "Added now 7 hours, 21 minutes" rather than of By:... In FF works ok...

<p>
Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun 
<br />
<br />
By: <a href="#">Author</a> / <a href="#" class="t2_c">Company</a>
<span class="small">
	<span class="tags"><a href="#">Tag 1</a> | <a href="#">Tag 2</a></span>
	<br />
	Added now 7 hours, 21 minutes
</span>
</p>
 
.small {font-size:0.84em;}
span.tags {float:right;}

cbichis
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+3
Joined: 2009-03-16
Posts: 12
Points: 15

Btw, i don't want to put the

Btw, i don't want to put the text outside of the

by couple of reasons...

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 8 years 47 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

See if this will do you any

See if this will do you any good using two paragraphs.

<p>Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun </p>
<p class="credits small"><span>By: <a href="#">Author</a> / <a href="#" class="t2_c">Company</a><br /><i class="small">Added now 7 hours, 21 minutes</i></span><a href="#">Tag 1</a> | <a href="#">Tag 2</a></p>

.credits {
	text-align:right;
	margin:20px 0;
	white-space:nowrap;
}
.credits span{
	float:left;
	text-align:left;
	font-size:14px;
}
.small {
	font-size:0.84em;
	font-style:normal;
}

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

<p>Lorem impsun Lorem impsun

<p>Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun Lorem impsun  <cite>By: <a href="#">Author</a> / <a href="#" class="t2_c">Company</a></cite></p>

cite {font-size:0.84em; display: block; text-align: right;}

I'm not exactly sure that is semantic use of CITE though. If not SPAN is probably acceptable.

cbichis
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+3
Joined: 2009-03-16
Posts: 12
Points: 15

I don't want to use 2

I don't want to use 2 paragraphs for some reason.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

cbichis wrote: I don't want

cbichis wrote:

I don't want to use 2 paragraphs for some reason.

OK, there's only one in the example provided.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

IE, right up to and including

IE, right up to and including v9, have never handled float elements correctly without a bunch of fixes. Add an explicit width to the cite/span float. E.g.

   cite {
      float: right;
      width: 10em;
      }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cbichis
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+3
Joined: 2009-03-16
Posts: 12
Points: 15

Thanks. Would be impossible

Thanks. Would be impossible to add a width since the text is dynamic...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Then expect problems with

Then expect problems with IE.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

What was wrong with using

What was wrong with using text-align as suggested earlier?

Verschwindende wrote:
  • CSS doesn't make pies

jmartins
jmartins's picture
Offline
newbie
USA
Last seen: 9 years 22 weeks ago
USA
Timezone: GMT-7
Joined: 2011-05-24
Posts: 1
Points: 1

about topic

Its informative post provides a lots of information on topic also provide more information on topic.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

thepineapplehead wrote: What

thepineapplehead wrote:

What was wrong with using text-align as suggested earlier?

Give it some thought, TPH. If the text is in an inline box, the width shrink-wraps, and the is no right, left, centered or justified alignment. If the text is in a block box, there is text alignment, but the box renders below the other box.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

My mistake

My mistake Smile

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

My mistake

My mistake Smile

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

A single acknowledgement

A single acknowledgement would have been enough. No need for a hair shirt. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Sorry, blame my phone and

Sorry, blame my phone and it's lack of reliable signal!

Verschwindende wrote:
  • CSS doesn't make pies