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

  • Thread starter news.frontiernet.net
  • Start date
N

news.frontiernet.net

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?
 
N

news.frontiernet.net

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?
 
B

Barry Pearson

news.frontiernet.net said:
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!)
 
N

news.frontiernet.net

Thank you guys!

news.frontiernet.net said:
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;
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top