2 Replies Latest reply on Jan 18, 2009 10:52 AM by the marketing guy

    Move text to bottom of div?

    the marketing guy Level 1
      I have a line of text, or a paragraph, that I want to position at the bottom of a div boundary using css. I've tried align-bottom as a rule for the <p>, but no dice. I dont see any other preceeding styles that are keeping the text up-- no padding or margins. There is an image floating in the div boundary, but it doesn't seen to be affecting the position of my line of text. Any thoughts? Thanks!
        • 1. Re: Move text to bottom of div?
          Level 7
          > Any thoughts?

          Yes. You won't be able to do this, really, in a single div. And your
          question implies that you have assigned a height to that div, which is
          generally a very risky thing to do. Can we see your code, please?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "calpolyjeff" <webforumsuser@macromedia.com> wrote in message
          news:gkuiv0$t6c$1@forums.macromedia.com...
          >I have a line of text, or a paragraph, that I want to position at the
          >bottom
          > of a div boundary using css. I've tried align-bottom as a rule for the
          > <p>, but
          > no dice. I dont see any other preceeding styles that are keeping the text
          > up--
          > no padding or margins. There is an image floating in the div boundary, but
          > it
          > doesn't seen to be affecting the position of my line of text. Any
          > thoughts?
          > Thanks!
          >

          • 2. Re: Move text to bottom of div?
            the marketing guy Level 1
            Right-- I gave the div a height of 150 px to hold it's size for the graphic I was going to float (so I can have a background color block in the heading). But the text rides up too far.

            Here's the code with the extraneous stuff removed (I'm trying to build a page pased on one of DW's Layouts.)

            <html xmlns=" http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            <!--

            .twoColHybRtHdr #header {
            padding: 0 10px;
            font-family: "Times New Roman", Times, serif;
            font-size: 14px;
            font-style: italic;
            height: 150px;
            background-color: #FFF;
            border-bottom-style: solid;
            border-bottom-color: #000;
            border-bottom-width: thin;
            margin-top: 0px;
            }

            .twoColHybRtHdr #container #header p {
            font-size: small;
            font-style: italic;
            font-family: "Times New Roman", Times, serif;
            text-align: right;
            vertical-align: bottom;
            }
            </style>
            </head>

            <body class="twoColHybRtHdr">

            <div id="container">
            <div id="header">
            <p>I want this text to appear at the bottom of the div</p></div>

            </div>
            </body>
            </html>