Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > left and right align on the same line

Reply
Thread Tools

left and right align on the same line

 
 
John Salerno
Guest
Posts: n/a
 
      02-11-2006
If I have a div with some text in it (a date and a time), and I want the
date left-aligned (default) and the time right-aligned with the right
side of the div, how would I do that?

I put spans around the date and time and gave them each a class of .date
and .time, and for time I did:

..time {
text-align: right;
}

but that didn't do anything, so I figure maybe I'm not using the spans
correctly.
 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      02-11-2006
With neither quill nor qualm, John Salerno quothed:

> If I have a div with some text in it (a date and a time), and I want the
> date left-aligned (default) and the time right-aligned with the right
> side of the div, how would I do that?
>
> I put spans around the date and time and gave them each a class of .date
> and .time, and for time I did:
>
> .time {
> text-align: right;
> }
>
> but that didn't do anything, so I figure maybe I'm not using the spans
> correctly.


You positioned the time within the span to the right of the span...

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-11-2006
John Salerno wrote:

> If I have a div with some text in it (a date and a time), and I want
> the date left-aligned (default) and the time right-aligned with the
> right side of the div, how would I do that?
>
> I put spans around the date and time and gave them each a class of
> .date and .time, and for time I did:
>
> .time {
> text-align: right;
> }


You need to use floats. See the source of this page of mine.
http://k75s.home.att.net/banner.html

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
John Salerno
Guest
Posts: n/a
 
      02-11-2006
Beauregard T. Shagnasty wrote:
> John Salerno wrote:
>
>> If I have a div with some text in it (a date and a time), and I want
>> the date left-aligned (default) and the time right-aligned with the
>> right side of the div, how would I do that?
>>
>> I put spans around the date and time and gave them each a class of
>> .date and .time, and for time I did:
>>
>> .time {
>> text-align: right;
>> }

>
> You need to use floats. See the source of this page of mine.
> http://k75s.home.att.net/banner.html
>


Excellent! float left and right did what I needed. But a quick question:
before I did float: left for the date (since it was already left-aligned
anyway), I did float: right for the time, and this caused it to not only
be moved to the right, but also down a little so that it wasn't lined up
on the same line as the date. But after I added float:left for the date,
this moved the time back up and re-aligned them. Why would it do that?

Thanks again!
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-11-2006
John Salerno wrote:

> Excellent! float left and right did what I needed. But a quick


Whoohoo.

> question: before I did float: left for the date (since it was already
> left-aligned anyway), I did float: right for the time, and this
> caused it to not only be moved to the right, but also down a little
> so that it wasn't lined up on the same line as the date. But after I
> added float:left for the date, this moved the time back up and
> re-aligned them. Why would it do that?


Think of shoes. If you're only wearing one shoe, you may get some parts
dragging behind, eh?

Wear both shoes and walking proceeds normally. <lol>

Yeah, yeah, I know ... not the answer you wanted. I'd guess that when
you only take one part out of the normal flow, the regular content ..
well .. I'm too busy watching ski jumping ...

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
John Salerno
Guest
Posts: n/a
 
      02-11-2006
Beauregard T. Shagnasty wrote:
> John Salerno wrote:
>
>> Excellent! float left and right did what I needed. But a quick

>
> Whoohoo.
>
>> question: before I did float: left for the date (since it was already
>> left-aligned anyway), I did float: right for the time, and this
>> caused it to not only be moved to the right, but also down a little
>> so that it wasn't lined up on the same line as the date. But after I
>> added float:left for the date, this moved the time back up and
>> re-aligned them. Why would it do that?

>
> Think of shoes. If you're only wearing one shoe, you may get some parts
> dragging behind, eh?
>
> Wear both shoes and walking proceeds normally. <lol>
>
> Yeah, yeah, I know ... not the answer you wanted. I'd guess that when
> you only take one part out of the normal flow, the regular content ..
> well .. I'm too busy watching ski jumping ...
>


LOL. Well, that last bit there actually makes some sense anyway! But
thanks for fixing the original problem!
 
Reply With Quote
 
Jim S.
Guest
Posts: n/a
 
      02-13-2006
hi, i was looking at your example, and i like it, am using dreamweaver 8 but
i noticed unless i write <span> manually, i can not seem to replicate your
example. (well almost, since what happens is, the div tag disappears but the
alignment happens)
do i really have to write <span> since even if i do that and apply a class
to it, it does not show like your code, so what am i doing wrong?

thanks if u answer this

jim

"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> John Salerno wrote:
>
>> If I have a div with some text in it (a date and a time), and I want
>> the date left-aligned (default) and the time right-aligned with the
>> right side of the div, how would I do that?
>>
>> I put spans around the date and time and gave them each a class of
>> .date and .time, and for time I did:
>>
>> .time {
>> text-align: right;
>> }

>
> You need to use floats. See the source of this page of mine.
> http://k75s.home.att.net/banner.html
>
> --
> -bts
> -Warning: I brake for lawn deer



 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-13-2006
Jim S. wrote:

> hi, i was looking at your example, and i like it, am using dreamweaver
> 8 but i noticed unless i write <span> manually, i can not seem to
> replicate your example. (well almost, since what happens is, the div
> tag disappears but the alignment happens)


I write code using a text editor, so I always create a span manually.

> do i really have to write <span> since even if i do that and apply a
> class to it, it does not show like your code,


Can you copy and paste, then modify with your content, in source mode or
whatever DW calls it?

> so what am i doing wrong?


Using DreamWeaver?

> thanks if u answer this


You're welcome.

>> http://k75s.home.att.net/banner.html

..
--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
Jim S.
Guest
Posts: n/a
 
      02-13-2006
thanks for replying, maybe another question
when do u usually use <span> ? i know when dreamweaver decides to but not
when i need to.

thanks again.
Jim

"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:ddcz7fh9ec4l$(E-Mail Removed)...
> Jim S. wrote:
>
>> hi, i was looking at your example, and i like it, am using dreamweaver
>> 8 but i noticed unless i write <span> manually, i can not seem to
>> replicate your example. (well almost, since what happens is, the div
>> tag disappears but the alignment happens)

>
> I write code using a text editor, so I always create a span manually.
>
>> do i really have to write <span> since even if i do that and apply a
>> class to it, it does not show like your code,

>
> Can you copy and paste, then modify with your content, in source mode or
> whatever DW calls it?
>
>> so what am i doing wrong?

>
> Using DreamWeaver?
>
>> thanks if u answer this

>
> You're welcome.
>
>>> http://k75s.home.att.net/banner.html

> .
> --
> -bts
> -Warning: I brake for lawn deer



 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-13-2006
Jim S. wrote:
> thanks for replying, maybe another question when do u usually use
> <span> ? i know when dreamweaver decides to but not when i need
> to.


I use span for markup of inline parts of content when there is no
semantic element that does it better.

If I wanted to <em>emphasize</em> something, I would not use span.

If I wanted to <span class="hot">change the color</span> of those words
....

..hot { background-color: transparent; color: red; }

If I wanted to float an image within a container, you've seen my banner
page.

I don't know of any WYSIWYMG apps that can do stuff like this reliably.

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help on table align on left of page vs left hanging indent =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?= XML 2 07-16-2007 11:46 AM
left and right text align in li frank.vandenbogerd@pandora.be HTML 6 12-15-2006 10:28 PM
left align within centre align Paul Lautman HTML 3 03-03-2006 02:45 PM
Align javascript alert message to right AND / OR make the direction as RIGHT-TO-LEFT Oran Javascript 2 12-03-2004 04:34 PM
how to Align text left & vertical align middle Kay ASP .Net 2 07-25-2003 08:32 AM



Advertisments