left and right align on the same line

Discussion in 'HTML' started by John Salerno, Feb 11, 2006.

  1. John Salerno

    John Salerno Guest

    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.
    John Salerno, Feb 11, 2006
    #1
    1. Advertising

  2. John Salerno

    Neredbojias Guest

    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.
    Neredbojias, Feb 11, 2006
    #2
    1. Advertising

  3. 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
    Beauregard T. Shagnasty, Feb 11, 2006
    #3
  4. John Salerno

    John Salerno Guest

    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!
    John Salerno, Feb 11, 2006
    #4
  5. 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
    Beauregard T. Shagnasty, Feb 11, 2006
    #5
  6. John Salerno

    John Salerno Guest

    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! :)
    John Salerno, Feb 11, 2006
    #6
  7. John Salerno

    Jim S. Guest

    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" <> wrote in message
    news:...
    > 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
    Jim S., Feb 13, 2006
    #7
  8. 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
    Beauregard T. Shagnasty, Feb 13, 2006
    #8
  9. John Salerno

    Jim S. Guest

    thanks for replying, maybe another question :D
    when do u usually use <span> ? i know when dreamweaver decides to :D but not
    when i need to.

    thanks again.
    Jim

    "Beauregard T. Shagnasty" <> wrote in message
    news:ddcz7fh9ec4l$...
    > 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
    Jim S., Feb 13, 2006
    #9
  10. Jim S. wrote:
    > thanks for replying, maybe another question :D when do u usually use
    > <span> ? i know when dreamweaver decides to :D 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
    Beauregard T. Shagnasty, Feb 13, 2006
    #10
  11. Jim S. wrote:

    > thanks for replying,


    Please do not top post in UseNet, the flow of the 'conversation' get all
    mixed up.

    maybe another question :D
    > when do u usually use <span> ? i know when dreamweaver decides to :D but not
    > when i need to.


    Another good reason to drop DW and learn HTML, then you will know what
    elements to use and why.

    A SPAN is for the demarcation of a portion of text for some distinction
    without interruption of the flow of whole block of text. I.e., text
    remains 'inline' as opposed to DIV that separates the text in a new block.

    <snip>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 13, 2006
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,134
  2. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    558
    Paul Lautman
    Mar 3, 2006
  3. Replies:
    6
    Views:
    1,485
    Jukka K. Korpela
    Dec 15, 2006
  4. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    984
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  5. Oran
    Replies:
    2
    Views:
    511
Loading...

Share This Page