4 Replies Latest reply on Aug 15, 2006 4:09 AM by adrianTNT

    Divs align problem

    adrianTNT Level 1
      Hello.

      Can somone see this code?!
      Most probably I used the DIVs and SPANs incorrectly.
      You will need to copy it in Dreamweaver to see how it looks and what I need.
      I am trying to get the "DOWNLOAD | PREVIEW" text to be aligned at bottom of that area.

      <div style="vertical-align:text-top; height:100px;"> <img src="" alt="template 1" width="150" height="100" style="width:150px; float:left;"/><span style="float:left; width:300px; height:100px; vertical-align:bottom; margin-left:10px;">
      <div style="float:left;vertical-align:text-top; float:left;">This hg is a new template sadasd as as dasd as as dasd as as dasd as as dasd as as dasd as as dasd as as dasd as as dasd as as dasd</div>
      <div style="vertical-align:text-bottom; float:left; width:200px;">[DOWNLOAD] [PREVIEW]</div>
      </span>
      </div>

      Any ideas?
      Thank you.

      - Adrian.
        • 1. Re: Divs align problem
          Level 7
          Try giving your outer div a position:relative. Then remove the float on the
          span and give it a position of absolute with bottom:0

          You can remove all of the vertical-aligns too as they are useless here.

          <div style="height:100px; position: relative;">
          <img src="image.gif" alt="template 1" width="150" height="100"
          style="width:150px; float:left;"/><span style="width:300px;
          margin-left:10px; position: absolute; bottom: 0px;">
          <div style="float:left; float:left;">This hg is a new
          template sadasd as as dasd as as dasd as as dasd as as dasd as as dasd as as
          dasd as as dasd as as dasd as as dasd</div>
          <div style="float:left; width:200px;">[DOWNLOAD]
          [PREVIEW]</div>
          </span></div>

          --
          Regards,
          ..Trent Pastrana
          www.fourlevel.com





          "adrianTNT" <adriantnt@adriantnt.com> wrote in message
          news:ebrctu$bqr$1@forums.macromedia.com...
          > Hello.
          >
          > Can somone see this code?!
          > Most probably I used the DIVs and SPANs incorrectly.
          > You will need to copy it in Dreamweaver to see how it looks and what I
          > need.
          > I am trying to get the "DOWNLOAD | PREVIEW" text to be aligned at
          > bottom of
          > that area.

          >
          > <div style="vertical-align:text-top; height:100px;"> <img src=""
          > alt="template
          > 1" width="150" height="100" style="width:150px; float:left;"/><span
          > style="float:left; width:300px; height:100px; vertical-align:bottom;
          > margin-left:10px;">
          > <div style="float:left;vertical-align:text-top; float:left;">This hg is a
          > new
          > template sadasd as as dasd as as dasd as as dasd as as dasd as as dasd as
          > as
          > dasd as as dasd as as dasd as as dasd</div>
          > <div style="vertical-align:text-bottom; float:left;
          > width:200px;">[DOWNLOAD]
          > [PREVIEW]</div>
          > </span>
          > </div>
          >
          > Any ideas?
          > Thank you.
          >
          > - Adrian.
          >


          • 2. Re: Divs align problem
            adrianTNT Level 1
            Thank you. The exact code didnt work but I managed to do something by absolute position:absolute as you wrote in that code.

            The code that worked:

            <img name="" src=" http://adriantnt.com/products/templates/1/thumb.gif" width="150" height="100"/>
            <span style="height: 80px; width:300px; position:absolute; display:inline;">
            This hg is a new template sadasd as as dasd as as dasd as as dasd as as dasd as as dasd as
            <span style="float:left; width:250px; position:absolute; top:80px; left: 0px;">[DOWNLOAD][PREVIEW]</span>
            </span>

            Thanks again for your time.
            Bye bye.
            • 3. Re: Divs align problem
              Level 7
              I misread your post. I see you only wanted the uppercase text at the bottom.
              There are still problems with your new code. You did pretty good but you
              can't float an absolutely positioned div. You also don't need the
              display:inline. Try this code...

              <img name="" src=" http://adriantnt.com/products/templates/1/thumb.gif"
              width="150" height="100"/>
              <span style="height: 80px; width:300px; position:absolute;">
              This hg is a new template sadasd as as dasd as as dasd as as dasd as as
              dasd as as dasd as
              <span style="width:250px; position:absolute; top:80px; left:
              0px;">[DOWNLOAD][PREVIEW]</span>
              </span>


              --
              Regards,
              ..Trent Pastrana
              www.fourlevel.com





              "adrianTNT" <adriantnt@adriantnt.com> wrote in message
              news:ebrlhb$k5b$1@forums.macromedia.com...
              > Thank you. The exact code didnt work but I managed to do something by
              > absolute
              > position:absolute as you wrote in that code.
              >
              > The code that worked:
              >
              > <img name="" src=" http://adriantnt.com/products/templates/1/thumb.gif"
              > width="150" height="100"/>
              > <span style="height: 80px; width:300px; position:absolute;
              > display:inline;">
              > This hg is a new template sadasd as as dasd as as dasd as as dasd as as
              > dasd
              > as as dasd as
              > <span style="float:left; width:250px; position:absolute; top:80px; left:
              > 0px;">[DOWNLOAD][PREVIEW]</span>
              > </span>
              >
              > Thanks again for your time.
              > Bye bye.
              >


              • 4. Re: Divs align problem
                adrianTNT Level 1
                Thanks, that worked.