Left Justify and RIght Justify Text on Same Line

Hello, I am trying to create a restaurant menu - my client wants the name/description of the dish (menu item) left justified, and the price right justified but in the same vertical position as the name of the dish. I tried this: http://css-tricks.com/25-left-align-and-right-align-text-on-the-same-line/

But it didn't seem to work. I also noticed that, when I use the CSS editor feature in the Tiny MCE, it tags the whole line, for instance - Block/Text Align / Right places a tag for style text-align: right at the beginning of my text, though I've selected only a few words at the end.

Any thoughts on this would be appreciated. I am not a CSS wiz by any means, but I can muddle through if there's no way to trick the MCE into doing what I want. I'm trying to keep this simple for my very much non-technical client, and he insists on having the restaurant menu aligned this way. I personally think it looks better with a ragged edge but the customer is always right!

Thanks in advance.
a [ed. note: mister_a last edited this post 15 years, 1 month ago.]

I have to say this pretty much stumped me. The only way I was able to make it work was with (cough) a table.

CSS



HTML

hi,

jesus bob, how can you say that

css are just a little tricky, guess who's the usual guilty


this is how i write all my modx module admin page and it works fine everywhere, the only thing is that i usually only need a wide first span or label followed a serie of links (modify, delete and so on) gently displayed as if they were in a column

there are other ways to do this, you can for example use a dl

give your dl a width and then use a float left for your dt and dd with the width and text align you need, the only thing is that some old version of safari (3...) didn't play that well with this, nowadays it works perfectly too

please do forget tables when they are not absolutely necessary you'll stop coughing

have swing

edited to say, you can see this working here (top item in the characteritics list)
http://www.brocandantics.com/fr/accueil
MODx site of corse and with simply a class added in tinyMCE for the client to put on the left span [ed. note: virtualbear last edited this post 15 years, 1 month ago.]

Well this looks like the ticket, thank Bob and virtualbear for your help. I will report and post results here in the next couple of days.

A

I swear I tried using spans first, but the width was ignored in FF.

I'm glad to see a non-table solution (though I'm not as rabidly anti-table as some people are).

And wouldn't you say a price list is tabular data anyway? So there wouldn't be anything semantically wrong with that.

It seems some (and I don't mean virtualbear) have taken the anti-tables thing to such extremes they end up spraying divs and spans all over, while a table would have done the job perfectly well.

+1 @Lucas exactly tables are bad for layout not for tabular data, tables still are useful you just have to be careful what you use them for.

Quote from: okyanet at Sep 03, 2011, 03:54 PM

And wouldn't you say a price list is tabular data anyway?

I would.

hi,

:) not more anti-table than you are Bob (have a look at the search result in this site i often use to convert and train friends to modx (www.crma.fr), the search results are displayed in a... table)
i even often have to defend them when they are the solution, even coughing a little like you did maybe because soooo long ago, when i started coding html, tables were the only solid solution to deal with netscape and ie4/5... and i always be thankful to tables for this

In this peculiar case, a price list, it sounded like... a list to my coding freak ears.

i would myself give the disadvantage of the non-table solution : harder to use a vertical-align, once more, thanks to ie who doesn't understand display: table-cell.
Easy to cheat with line-height, as long as you keep the text being on one line but it's a real limitation

the advantages are,
- particularly with the dl/dt/dd solution, a lighter html
- the ability po position thing absolutly in litteraly anything else than a td (ff doesn't understand position: relative; for a td, how often had i to do to position a sold banner absolutely over a price tag because of that when tables were the solution...)
- not having to deal with browsers slightly different ways to deal with auto-adjusting, width/padding, border-collapsing, empty cells... when it comes to tables
- and, most of all, what i like in non tr td td solution is that you do what you want, even change your mind, a single line or not, with the same html and you know what, clients often change their minds... that's probably why i try not having to rewrite my code each time they do

have swing

I gotta say, the markup for the <dl> solution was super elegant and lightweight

@virtualbear: I've been meaning to ask for ages... what does 'have swing' mean?