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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Berlin Brown
    #1

    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.
    Tags: None
    • Andy Dingley
      #2
      Re: Two rows of links, use of DIV, align to the right

      On 2 Apr, 16:25, Berlin Brown <berlin.br...@g mail.comwrote:
      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 <brhere (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.

        Comment

        • Bergamot
          #3
          Re: Two rows of links, use of DIV, align to the right

          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

            Comment

            Previous template Next
            Working...