Two rows of links, use of DIV, align to the right

This is a simple div/layout question. I could easily solve the
problem with a table, but I don't want to do that.

I have a row of links. I want row 1 to have links and row 2 to have
links. I want both to align such they are on the right (edge up to
the right).

Here is my code or one variation of it.

<div style="float: right; text-align: right;" id="row1">
My Links ...
</div>
<div style="float: right; text-align: right;" id="row2">
My Links ...
</div>

On a small resolution 1024x768. This works fine. The links show up
as I describe. Links to the right, one on one row and links on
another row.

As I increase the screen resolution and expand the browser, row1 shows
up on the right and row2 shows up on the left of row1. They are on
the same row.

I removed "float: right", but I couldn't position the links to the
right.

On 2 Apr, 16:25, Berlin Brown <berlin.br... (AT) gmail (DOT) com> wrote:

I removed "float: right", but I couldn't position the links to the
right.

Floats are one problem, clearing after them is quite another!

Read <http://brainjar.com/css/positioning/>

You will probably have to modify your HTML and insert an element after
the <div>(s) such as <br>, <hr> (my favourite) or even another <div>.
This element has CSS clear:right; applied to it. The trick is to
realise that you _do_ need to add some extra HTML element(s) to your
page as "hooks" on which to hang more CSS. CSS alone doesn't and
cannot handle the whole problem itself. You might see advice to work
around this problem with CSS :after & content: instead. I don't advise
that in practice, as it doesn't work on IE.

It's not quite conformant HTML to use <br> here (although commonly
done), and so I prefer the <hr>, even though I then need to use some
more CSS to stop it displaying. Some people prefer an anoymous <div>
instead, again with the CSS clear applied to it.


Posting a URL to an example generally encourages a better response
than posting fragments.

Berlin Brown wrote:

I have a row of links. I want row 1 to have links and row 2 to have
links. I want both to align such they are on the right (edge up to
the right).

div style="float: right; text-align: right;" id="row1"
My Links ...
/div
div style="float: right; text-align: right;" id="row2"
My Links ...
/div

As I increase the screen resolution and expand the browser, row1 shows
up on the right and row2 shows up on the left of row1. They are on
the same row.

Gotta wonder whether you should float anything at all, i.e. you've
decided on a solution (floating) before defining the actual problem.
Posting a URL showing the context would be better than a code snippet.

--
Berg