Simple flush right need

[news.frontiernet.net]

I am trying to do something that is soooo simple and intuitive with a
wordprocessor, yet seems to be complex and elusive with HTM and CSS.

I am trying to right-adjust something to the far right of the top line of a
two line business information listing for which there will be many such two
lines entries on the page.

I enclosed the whole firm in a DIV container and each line is in its own
DIV.

An example of one firms HTML coding would be:
<div class="box">
<div class="name">
A & T Tap
<span class="firm-category">Restaurants/Lounges</span>
</div>
<div class="extra">
&nbsp;1124 Second Ave
&nbsp; Worthington
&nbsp;507/376-6556
<A HREF="/Business/citycent.htm"><img src="images/citycenter.jpg"
border=0 width="54" height="12"></A>
</div>
</div>

The HTML document is at: http://www.wgtn.net/Business/chamlist.htm

The CSS is at http://www.wgtn.net/Business/chamlist.css

So far I have tried;
1) float: right on the span class which seemed to move to the next line in
one or the other browser
2) positioning the firl line relatively then positioning the span absolutely
top 0 and right 0 that didnt work in one or the other browser either

Presently I have just added spacing between the Firm Name and the field I
want flush right.

How can I get that firm-category to go flush right in all modern browsers
without causing another line?

 

[Mitja]

I am trying to do something that is soooo simple and
intuitive with a wordprocessor, yet seems to be complex
and elusive with HTM and CSS.

I am trying to right-adjust something to the far right of
the top line of a two line business information listing
for which there will be many such two lines entries on
the page.

I enclosed the whole firm in a DIV container and each
line is in its own DIV.

An example of one firms HTML coding would be:
<div class="box">
<div class="name">
A & T Tap
<span class="firm-category">Restaurants/Lounges</span>
</div>
<div class="extra">
&nbsp;1124 Second Ave
&nbsp; Worthington
&nbsp;507/376-6556
<A HREF="/Business/citycent.htm"><img
src="images/citycenter.jpg" border=0 width="54"
height="12"></A> </div>
</div>

The HTML document is at:
http://www.wgtn.net/Business/chamlist.htm

The CSS is at http://www.wgtn.net/Business/chamlist.css

So far I have tried;
1) float: right on the span class which seemed to move to
the next line in one or the other browser
2) positioning the firl line relatively then positioning
the span absolutely top 0 and right 0 that didnt work in
one or the other browser either

Presently I have just added spacing between the Firm Name
and the field I want flush right.

How can I get that firm-category to go flush right in all
modern browsers without causing another line?

But it isn't that simple to achieve in Word - or is it?
The easy way out is to use tables.
The other way is with floats - just float the first line as well:
<div class="name">
<div style="float:left">A & T Tap</div>
<div style="float:right">Restaurants/Lounges</div>
</div>

 

[news.frontiernet.net]

This doesnt work. This idea interfers with the firms second line as shown in
this example where I used this idea on the first of the firms, but ot on the
rest of them. That first firm has its second line floating up into the first
line http://www.wgtn.net/Business/chamlist_1.htm And for some reason, I seem
to have triggered a width problem that was not there before. I can fix trhe
width problem.

But, I still need a way to reliably flush left and flush right stuff on the
first line without it interfering with the rest of the presentation.

 

[Webcastmaker]

I am trying to do something that is soooo simple and intuitive with a
wordprocessor, yet seems to be complex and elusive with HTM and CSS.

I am trying to right-adjust something to the far right of the top line of a
two line business information listing for which there will be many such two
lines entries on the page.

The easy way is to use divs floated left and right.

Just a note, A whole bunch of people can not use the site because you
are so dependent on Javascript. This site seems to be one that you
would want everyone that visits to see. YMMV

 

[Jeff Thies]

I am trying to do something that is soooo simple and intuitive with a
wordprocessor, yet seems to be complex and elusive with HTM and CSS.

I am trying to right-adjust something to the far right of the top line of a
two line business information listing for which there will be many such two
lines entries on the page.

Have you tried: text-align: right ? You may have to change that span to
a div, depending on exactly what you are right aligning.

Cheers,
Jeff

 

[Steve Pugh]

This doesnt work. This idea interfers with the firms second line as shown in
this example where I used this idea on the first of the firms, but ot on the
rest of them. That first firm has its second line floating up into the first
line http://www.wgtn.net/Business/chamlist_1.htm

The second line is the <div class="extra">, right?
Add clear: both; to the styles for that class.

And please don't top post. Keep on doing it and people will start to
ignore your posts, reducing your chances of getting useful answers.

Steve

 

[news.frontiernet.net]

I use a DHTML menuing system for my web site navigation that utilizes
JavaScript in a way that is gauranteed to be compatible with all browsers. A
non JS navigations system woul add more load time to my web site.

So, there is a trade off. Short Load times for ALL users vs non_js
browsers not being able to use the site. I choose to give benefits to the
many over the few that doent have JS enabled.

The biggest problem that I am aware of is the lack of consistent CSS
rendering for my visitors. That effects me more than the lack of JS for a
very few.

At least, IF js is enabled, it IS consistently applied over the many
browsers. I cannot say that about CSS.

 

[Webcastmaker]

This doesnt work.

add a <br> before the "extra" div

 

[Webcastmaker]

I use a DHTML....

<snip>

Read the faq about top posting. It will save you a lot of
harassment. Some here take top posting very serious. Always put
what you want to quote above what you are typing. also, cut out the
signature from the quote.

Now back to your message....

JavaScript in a way that is gauranteed to be compatible with all browsers. A
non JS navigations system woul add more load time to my web site.

Well to each his own, but I think that is a mistake. ESPECIALLY on a
community information page.

So, there is a trade off. Short Load times for ALL users vs non_js
browsers not being able to use the site. I choose to give benefits to the
many over the few that doent have JS enabled.

Few = 10-15% Lower percentage of home users, higher percentage of
business viewers. But again, the choice is yours.

The biggest problem that I am aware of is the lack of consistent CSS
rendering for my visitors. That effects me more than the lack of JS for a
very few.
At least, IF js is enabled, it IS consistently applied over the many
browsers. I cannot say that about CSS.

Actually different browsers handle some javascript differently. I am
currently working on a project that deals specifically with this
issue. (I didn't look at your code to see if it would be effected by
these differences)

 

[rf]

.

I use a DHTML menuing system for my web site navigation that utilizes
JavaScript in a way that is gauranteed to be compatible with all browsers.

This is the funniest thing I have heard in ages

The fact that you use the term DHTML (a Microsoft invented word) virtually
gauantees that the the page will *not* be compatible with all browsers.

Here are two screenshots. (68K)

http://users.bigpond.net.au/rf/menus/wgtn.jpg

As you can see IE stuffs up that floating alphabet. Mozilla does too but
differently and also stuffs up the top menu bar.

In addition you have problems with the content which in both cases has
escapes the left hand edge of the canvas. Note the scroll bar position: that
content is not accessible.

A
non JS navigations system woul add more load time to my web site.

Rubbish. Adding a bit of stuff to make the site degrade gracefully in the
absense of javascript would add very little to your load time.

If you are really worried about load time then consider the following:

Replace that 5K azchoice.gif (and the imagemap that goes along with it) with
some real text which will be accessible to a blind person.

You have about a thousand &nbsp;s in there, presumably to space the text
away from the left border of the table cells. One single CSS rule could
replace all of those.

Whatever server side process has generated the page has thrown in thousands
of cr/lf's. The majority of these are not required.

That floating top link is not required. The user already has one of those,
it's called the Home key. There goes another 2K of image and probably 2K of
javascript to drive it. BTW those floating things (when they break) make the
page bottomless. One can never scroll to the bottom of the page because the
bottom of the page is *always* below the bottom of the canvas ;-)

So, there is a trade off. Short Load times for ALL users vs non_js
browsers not being able to use the site. I choose to give benefits to the
many over the few that doent have JS enabled.

The very first link is to a restaurant. Do you think the owners of that
restaurant would turn away every seventh person who tries to walk through
the door? That is what you are doing by making a page that *requires*
javascript.

I would prefer a restaurant that lets all of my party in (the whole eight,
not just seven of us) yet takes an extra minute to bring me another beer.

The biggest problem that I am aware of is the lack of consistent CSS
rendering for my visitors. That effects me more than the lack of JS for a
very few.

CSS should degrade gracefully. If your site looks horrible without CSS then
your site has been badly constructed.

Besides, a person using a browser that does not support the simple CSS you
use will be quite used to seeing pages that don't quite look right. But, at
least they can use them.

At least, IF js is enabled, it IS consistently applied over the many
browsers.

Wrong.

I cannot say that about CSS.

Neither can I but I can say that both CSS and javascript should *add* to a
page and not be *required* for the pages functionality.

 

[Webcastmaker]

The very first link is to a restaurant. Do you think the owners of that
restaurant would turn away every seventh person who tries to walk through
the door? That is what you are doing by making a page that *requires*
javascript.
I would prefer a restaurant that lets all of my party in (the whole eight,
not just seven of us) yet takes an extra minute to bring me another beer.

Actually I think it is more like, the restaurant will only server you
if you have a tie. 7 of you have a tie. The 8th can not eat there
because he does not have a tie. The 8th person has 2 choices, either
get a tie or don't eat.

Now many restaurants have a stash of ties (I.e. plain links for non
JS users) they keep under the counter when someone that has no tie
comes in, they can use that tie.....

Same point you are making, but a more realistic analogy...