9 Replies Latest reply on Jun 19, 2007 11:07 PM by Newsgroup_User

    DIV Tag, H1and CSS Positioning Question

    Myrrhlin225
      Hi all,
      I have a basic question regarding the placement of some text inside of a <div> tag. I am essentially trying to create a small heading block (the <div>) 750px wide by 25px high, with some title heading text aligned left and a price heading text aligned right and about 5px of padding around the text on all sides.

      The problem I'm having is just getting the right aligned text to shift far enough over to the right of the 750px heading block using CSS. I want to create more space between the end of the title text and the beginning of the price text, but because the title text length will vary from item to item, I cannot use a left margin offset from the title text. Basically, I want to offset the right text from the far right edge of the header block itself without using tables. I hope this makes sense.

      What would be a good approach to take in doing something as simple as this, keeping in mind that I am trying to create something that "looks" like a table without using tables?

      Thanks,
      ~Greg
        • 1. Re: DIV Tag, H1and CSS Positioning Question
          Level 7
          Let's see the page, please.

          A float right on the text's contaner with a right margin may be all you
          need.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Myrrhlin225" <webforumsuser@macromedia.com> wrote in message
          news:f58vph$1u6$1@forums.macromedia.com...
          > Hi all,
          > I have a basic question regarding the placement of some text inside of a
          > <div>
          > tag. I am essentially trying to create a small heading block (the <div>)
          > 750px
          > wide by 25px high, with some title heading text aligned left and a price
          > heading text aligned right and about 5px of padding around the text on all
          > sides.
          >
          > The problem I'm having is just getting the right aligned text to shift far
          > enough over to the right of the 750px heading block using CSS. I want to
          > create
          > more space between the end of the title text and the beginning of the
          > price
          > text, but because the title text length will vary from item to item, I
          > cannot
          > use a left margin offset from the title text. Basically, I want to offset
          > the
          > right text from the far right edge of the header block itself without
          > using
          > tables. I hope this makes sense.
          >
          > What would be a good approach to take in doing something as simple as
          > this,
          > keeping in mind that I am trying to create something that "looks" like a
          > table
          > without using tables?
          >
          > Thanks,
          > ~Greg
          >


          • 2. Re: DIV Tag, H1and CSS Positioning Question
            Level 7
            You might want to try using a definition list (code below) I would avoid
            using height though.


            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            " http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>Untitled Document</title>
            <style type="text/css">
            #wrapper {
            width: 750px;
            height: 25px;
            border: 1px solid #000;
            }
            dl {
            margin: 0;
            padding: 0;
            }
            dt {
            float: left;
            width: 500px;
            clear: both;
            padding: 5px;
            }
            dd {
            margin: 0 0 5px 12em;
            text-align: right;
            padding: 5px;
            }
            </style>
            </head>

            <body>
            <div id="wrapper">
            <dl>
            <dt>Some text here as the title. Some text here as the title.</dt>
            <dd>Price</dd>
            </dl>
            </div>
            </body>
            </html>











            Myrrhlin225 wrote:

            > Hi all,
            > I have a basic question regarding the placement of some text inside of a <div>
            > tag. I am essentially trying to create a small heading block (the <div>) 750px
            > wide by 25px high, with some title heading text aligned left and a price
            > heading text aligned right and about 5px of padding around the text on all
            > sides.
            >
            > The problem I'm having is just getting the right aligned text to shift far
            > enough over to the right of the 750px heading block using CSS. I want to create
            > more space between the end of the title text and the beginning of the price
            > text, but because the title text length will vary from item to item, I cannot
            > use a left margin offset from the title text. Basically, I want to offset the
            > right text from the far right edge of the header block itself without using
            > tables. I hope this makes sense.
            >
            > What would be a good approach to take in doing something as simple as this,
            > keeping in mind that I am trying to create something that "looks" like a table
            > without using tables?
            >
            > Thanks,
            > ~Greg
            >

            • 3. DIV Tag, H1and CSS Positioning Question
              Myrrhlin225 Level 1
              Thanks for the definition list suggestion Osgood! I will certainly give that a try. I did not even know about DL's until now. Quick question though, are the <dt> and <dd> elements inline, or will it create a list (i.e. the <dd> under the <dt>)?

              Here is a link to the page I am trying to put together.
              http://testing.neptuniandesigns.com/av_materials_test.php

              Another thing that is just driving me crazy is the fact that the headers for each item look relatively normal in Firefox, but are pushed upwards toward the top edge in IE7. The "item #" (in the item footer) also looks very strange in IE7, where the first one looks pushed toward the bottom edge of the footer block and the other two are perfectly centered in the vertical. All three of these item numbers are controlled by the same CCS rule too!!! What's up with IE7? Why is it so hard to get it to display CSS as intended?

              Thanks,
              ~Greg
              • 4. Re: DIV Tag, H1and CSS Positioning Question
                Level 7
                It creates a list (not inline elements) with the definitions indented.


                --
                Alec Fehl, MCSE, A+, ACE, ACI
                Adobe Community Expert

                AUTHOR:
                Microsoft Office 2007 PowerPoint: Comprehensive Course (Labyrinth
                Publications)
                Welcome to Web Design and HTML (Labyrinth Publications)

                CO-AUTHOR:
                Microsoft Office 2007: Essentials (Labyrinth Publications)
                Computer Concepts and Vista (Labyrinth Publications)
                Mike Meyers' A+ Guide to Managing and Troubleshooting PCs (McGraw-Hill)
                Internet Systems and Applications (EMC Paradigm)
                • 5. Re: DIV Tag, H1and CSS Positioning Question
                  Level 7
                  On Tue, 19 Jun 2007 18:30:09 -0400, Alec Fehl <jacalart@hotmail.com>
                  wrote:

                  >It creates a list (not inline elements) with the definitions indented.

                  Which you are free to style as needed using CSS.

                  Gary
                  • 6. DIV Tag, H1and CSS Positioning Question
                    Myrrhlin225 Level 1
                    Ah, that's what I expected. Oh well then, I don't think a definition list will help me in this case since I'm trying to get two pieces of inline text (on the same row) to be positioned far left and far right from each other. (Not sure how I would do that with CSS).

                    I wish there was some way that I could make one test element offset from the left edge of my <div> container and the other from the right edge. Is there any way that anyone might know of to do this? It seems like it would be a really simple task, but sometimes the "seemly simple" ones can be the hardest.

                    Thanks!
                    ~Greg
                    • 7. Re: DIV Tag, H1and CSS Positioning Question
                      Myrrhlin225 Level 1
                      Thanks Murray! A float right was all I needed to do, however I had experienced some problems with this when I tried it before posting my question. Turns out I just needed to "clear" the floating <div> tag located just below it.

                      So thanks again *ACE*!!!
                      • 8. Re: DIV Tag, H1and CSS Positioning Question
                        Level 7
                        You're welcome!

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.dreamweavermx-templates.com - Template Triage!
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                        ==================


                        "Myrrhlin225" <webforumsuser@macromedia.com> wrote in message
                        news:f59sqd$5ue$1@forums.macromedia.com...
                        > Thanks Murray! A float right was all I needed to do, however I had
                        > experienced
                        > some problems with this when I tried it before posting my question. Turns
                        > out
                        > I just needed to "clear" the floating <div> tag located just below it.
                        >
                        > So thanks again *ACE*!!!
                        >


                        • 9. Re: DIV Tag, H1and CSS Positioning Question
                          Level 7
                          Myrrhlin225 wrote:
                          > Ah, that's what I expected. Oh well then, I don't think a definition list will
                          > help me in this case since I'm trying to get two pieces of inline text (on the
                          > same row) to be positioned far left and far right from each other.

                          If you had copied and tested the example I provided you that's exactly
                          what the definition list did.

                          Oh well another wasted effort.