How to put something at the bottom of a containing div?

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

    How to put something at the bottom of a containing div?

    Greetings.

    I am trying to figure out how to use CSS to position an element in the
    bottom right of its containing element. I thought this would be
    accomplished using "position: relative; bottom: 0; right: 0;" but clearly
    I'm mistaken. Can anyone help me?

    Here's a minimal example:

    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
    <title>foobar </title>
    <style type="text/css">
    .frame { border: solid thick black; }
    .para { border: dotted thin orange; }
    .aside {
    position: relative;
    bottom: 0;
    right: 0;
    border: dotted thin red;
    }
    </style>
    </head>
    <body>
    <div class="frame">
    <div class="aside">
    This should appear in the bottom right corner of the "frame".
    </div>
    <p class="para">
    Here is a paragraph which should display at the top of the
    "frame".
    </p>
    Here is an anonymous box in the "frame".
    </div>
    </body>
    </html>

    I would like the output to be something like this:

    +-------------------------------------------------------------------+
    |Here is a paragraph which should display at the top of the "frame".|
    | |
    |Here is an anonymous box in the "frame". |
    | |
    | This should appear in the bottom right corner of the "frame".|
    +-------------------------------------------------------------------+

    Regards,
    Tristan

    --
    _
    _V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
    / |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
    (7_\\ http://www.nothingisreal.com/ >< To finish what you
    Tags: None
    • Jonivar Skullerud
      #2
      Re: How to put something at the bottom of a containing div?

      Tristan Miller <psychonaut@not hingisreal.com> writes:
      [color=blue]
      > Greetings.
      >
      > I am trying to figure out how to use CSS to position an element in the
      > bottom right of its containing element. I thought this would be
      > accomplished using "position: relative; bottom: 0; right: 0;" but clearly
      > I'm mistaken. Can anyone help me?
      >
      > Here's a minimal example:
      >
      > <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
      > <head>
      > <title>foobar </title>
      > <style type="text/css">
      > .frame { border: solid thick black;[/color]
      position: relative; }
      [color=blue]
      > .para { border: dotted thin orange; }
      > .aside {[/color]
      position: absolute;[color=blue]
      > bottom: 0;
      > right: 0;
      > border: dotted thin red;
      > }
      > </style>[/color]

      should do it.
      You need to have the container box relatively positioned, and then
      position the element absolutely within that box.

      Cheers, jonivar
      --
      | jonivar skullerud | http://www.jonivar.skullerud.name/ |
      -------------------------------------------------------------------------
      You can tell a true war story by its absolute and uncompromised allegiance
      to obscenity and evil. -- Tim O'Brien

        Comment

        • Tristan Miller
          #3
          Re: How to put something at the bottom of a containing div?

          Greetings.

          In article <xav3bvux6g6.fs f@lanczos.maths .tcd.ie>, Jonivar Skullerud wrote:[color=blue][color=green]
          >> I am trying to figure out how to use CSS to position an element in the
          >> bottom right of its containing element. I thought this would be
          >> accomplished using "position: relative; bottom: 0; right: 0;" but
          >> clearly I'm mistaken. Can anyone help me?[/color]
          >
          > You need to have the container box relatively positioned, and then
          > position the element absolutely within that box.[/color]

          Perfect; thanks! (After doing a Google Groups search for "bottom right" in
          this newsgroup, all I got were threads claiming it couldn't be done!)

          Regards,
          Tristan

          --
          _
          _V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
          / |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
          (7_\\ http://www.nothingisreal.com/ >< To finish what you

            Comment

            Previous template Next
            Working...