CSS aligning two things on one line with one left and one right

Discussion in 'HTML' started by news.frontiernet.net, Apr 15, 2004.

  1. I am trying to place two things on one line and control their positioning
    with CSS rather than tables.

    I have a firm name that I want left adjusted and a category that I want
    right adjusted.

    Another aspect of this is that some of the firm names are short and some are
    very long. And the same is true for the category name. I havnt even tried to
    get overflow working yet to deal with the possible overlap of these two
    fields.

    I am still trying to get these two basic elements positioned as I want them.

    Here is the coding that I presently have;
    <style type="text/css">
    #firmheader {border: 1px solid black; position: relative; background-color:
    lightgreen; font-family:Arial; font-size:12; text-align: right; }
    ..firmheader_name {position: absolute; text-align: left; left:0;}
    </style>

    <div ID="firmheader">
    <span class="firmheader_name" >Firm Name</span>
    <span class="firmheader_category">Category of Goods &amp; Services</span>
    </div>

    I assumed that the parent box of #firmheader would set the positioning for
    the inner span so that I could use "left: 0" to set the firm name at the
    left. Apparently not.

    Does anyone have an example of how to get this sort of thing done in CSS?
     
    news.frontiernet.net, Apr 15, 2004
    #1
    1. Advertising

  2. news.frontiernet.net

    Noozer Guest

    I could be wrong, but look into "FLOAT: left" and "FLOAT: right"


    "news.frontiernet.net" <> wrote in message
    news:I7Cfc.1192$...
    > I am trying to place two things on one line and control their positioning
    > with CSS rather than tables.
    >
    > I have a firm name that I want left adjusted and a category that I want
    > right adjusted.
    >
    > Another aspect of this is that some of the firm names are short and some

    are
    > very long. And the same is true for the category name. I havnt even tried

    to
    > get overflow working yet to deal with the possible overlap of these two
    > fields.
    >
    > I am still trying to get these two basic elements positioned as I want

    them.
    >
    > Here is the coding that I presently have;
    > <style type="text/css">
    > #firmheader {border: 1px solid black; position: relative;

    background-color:
    > lightgreen; font-family:Arial; font-size:12; text-align: right; }
    > .firmheader_name {position: absolute; text-align: left; left:0;}
    > </style>
    >
    > <div ID="firmheader">
    > <span class="firmheader_name" >Firm Name</span>
    > <span class="firmheader_category">Category of Goods &amp;

    Services</span>
    > </div>
    >
    > I assumed that the parent box of #firmheader would set the positioning for
    > the inner span so that I could use "left: 0" to set the firm name at the
    > left. Apparently not.
    >
    > Does anyone have an example of how to get this sort of thing done in CSS?
    >
    >
     
    Noozer, Apr 15, 2004
    #2
    1. Advertising

  3. I had thought that FLOAT takes the material down to the next line in at
    least some browsers.

    It seems to block out the background and border or its parent in MSEI 6, but
    looks ok in NS 7 and opera recent version.

    Is there a way without float to do this?

    "Noozer" <> wrote in message
    news:HzCfc.131191$Ig.111357@pd7tw2no...
    > I could be wrong, but look into "FLOAT: left" and "FLOAT: right"
    >
    >
    > "news.frontiernet.net" <> wrote in message
    > news:I7Cfc.1192$...
    > > I am trying to place two things on one line and control their

    positioning
    > > with CSS rather than tables.
    > >
    > > I have a firm name that I want left adjusted and a category that I want
    > > right adjusted.
    > >
    > > Another aspect of this is that some of the firm names are short and some

    > are
    > > very long. And the same is true for the category name. I havnt even

    tried
    > to
    > > get overflow working yet to deal with the possible overlap of these two
    > > fields.
    > >
    > > I am still trying to get these two basic elements positioned as I want

    > them.
    > >
    > > Here is the coding that I presently have;
    > > <style type="text/css">
    > > #firmheader {border: 1px solid black; position: relative;

    > background-color:
    > > lightgreen; font-family:Arial; font-size:12; text-align: right; }
    > > .firmheader_name {position: absolute; text-align: left; left:0;}
    > > </style>
    > >
    > > <div ID="firmheader">
    > > <span class="firmheader_name" >Firm Name</span>
    > > <span class="firmheader_category">Category of Goods &amp;

    > Services</span>
    > > </div>
    > >
    > > I assumed that the parent box of #firmheader would set the positioning

    for
    > > the inner span so that I could use "left: 0" to set the firm name at the
    > > left. Apparently not.
    > >
    > > Does anyone have an example of how to get this sort of thing done in

    CSS?
    > >
    > >

    >
    >
     
    news.frontiernet.net, Apr 15, 2004
    #3
  4. news.frontiernet.net wrote:
    > I am trying to place two things on one line and control their
    > positioning with CSS rather than tables.
    >
    > I have a firm name that I want left adjusted and a category that I
    > want right adjusted.
    >
    > Another aspect of this is that some of the firm names are short and
    > some are very long. And the same is true for the category name. I
    > havnt even tried to get overflow working yet to deal with the
    > possible overlap of these two fields.


    I *strongly* recommend that you consider your requirements in the case of
    overlap. Until you understand your requirements, you are not in a position to
    evaluate any specific proposal.

    [snip]
    > I assumed that the parent box of #firmheader would set the
    > positioning for the inner span so that I could use "left: 0" to set
    > the firm name at the left. Apparently not.


    Are you just looking via IE? For example, in Firefox it works. Test in a
    variety of browsers.

    > Does anyone have an example of how to get this sort of thing done in
    > CSS?


    Float one left, and the other right. As Noozer rightly says.

    Try this:

    <div ID="firmheader">
    <span class="firmheader_name" >Firm Name</span>
    <span class="firmheader_category">Category of Goods &amp; Services</span>
    <div class="end"></div>
    </div>

    #firmheader {
    border: 1px solid black;
    background-color: #7f7;
    font-family: Arial;
    font-size: 12;
    }
    ..firmheader_name {
    float: left;
    }
    ..firmheader_category {
    float: right;
    }
    ..end {
    clear: both;
    }

    (And have a proper generic font-family!)

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
     
    Barry Pearson, Apr 15, 2004
    #4
  5. Toby A Inkster, Apr 15, 2004
    #5
  6. Christopher R, Apr 16, 2004
    #6
  7. Thank you guys!

    "news.frontiernet.net" <> wrote in message
    news:I7Cfc.1192$...
    > I am trying to place two things on one line and control their positioning
    > with CSS rather than tables.
    >
    > I have a firm name that I want left adjusted and a category that I want
    > right adjusted.
    >
    > Another aspect of this is that some of the firm names are short and some

    are
    > very long. And the same is true for the category name. I havnt even tried

    to
    > get overflow working yet to deal with the possible overlap of these two
    > fields.
    >
    > I am still trying to get these two basic elements positioned as I want

    them.
    >
    > Here is the coding that I presently have;
    > <style type="text/css">
    > #firmheader {border: 1px solid black; position: relative;

    background-color:
    > lightgreen; font-family:Arial; font-size:12; text-align: right; }
    > .firmheader_name {position: absolute; text-align: left; left:0;}
    > </style>
    >
    > <div ID="firmheader">
    > <span class="firmheader_name" >Firm Name</span>
    > <span class="firmheader_category">Category of Goods &amp;

    Services</span>
    > </div>
    >
    > I assumed that the parent box of #firmheader would set the positioning for
    > the inner span so that I could use "left: 0" to set the firm name at the
    > left. Apparently not.
    >
    > Does anyone have an example of how to get this sort of thing done in CSS?
    >
    >
     
    news.frontiernet.net, Apr 16, 2004
    #7
    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. D R E

    css not aligning right...

    D R E, Jul 9, 2004, in forum: HTML
    Replies:
    2
    Views:
    405
    Sid Ismail
    Jul 9, 2004
  2. Replies:
    5
    Views:
    1,124
    Ian Rastall
    Jun 29, 2005
  3. John Salerno

    left and right align on the same line

    John Salerno, Feb 11, 2006, in forum: HTML
    Replies:
    10
    Views:
    11,928
    Jonathan N. Little
    Feb 13, 2006
  4. =?Utf-8?B?QmlzaG95?=
    Replies:
    0
    Views:
    1,004
    =?Utf-8?B?QmlzaG95?=
    Dec 28, 2006
  5. Oran
    Replies:
    2
    Views:
    560
Loading...

Share This Page