5 Replies Latest reply on Nov 21, 2008 5:50 AM by Newsgroup_User

    div tags

    jigen08
      I'm new to Dreamweaver, learning through doing. I'm putting together a CSS using some Div tags:

      There is a large Div tag which serves as the container for the page, set to relative so it can be centered. I have the height set to 100% so it adjusts to the Div tags it holds.

      Within the container are three Div tags, set to absolute so they move with the container. They are a header, body and footer. The header has a fixed height, about 100 pixels. This means I can align the body at the bottom of this same fixed height. Since the body changes with the content, I don't have a definite value for placing the footer.

      My question is: how can I set the footer so it aligns with the bottom of the container?

      I'd like to know how to do this in the Dreamweaver interface, what settings should I enter? (Many of the help forums begin to answer similar questions to this with reams of code, which I'm picking up slowly, but I'd prefer to learn how to do it in the design pane first.)

      Thanks in advance...





        • 1. Re: div tags
          malcster2 Level 1
          first things first. you don't need to use absolute divs. they will bring you more trouble than they are worth.

          you don't really need to set the height of the main div 100%.

          to set the footer at the bottom of the page, just put the footer div after your body div tag. it will get pushed down as you enter content.

          to centre the main container, in css, set the container to your preffered width.(think about your target audience)

          enter this code for your main container

          #container
          {
          width:xxxpx;
          margin: 0 auto;
          }

          this will center the main div.
          • 2. Re: div tags
            Level 7
            And, if you are not using absolute positioning, then you don't need the main
            wrapper to be relatively positioned.

            --
            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
            ==================


            "malcster2" <webforumsuser@macromedia.com> wrote in message
            news:gg4l1e$dhh$1@forums.macromedia.com...
            > first things first. you don't need to use absolute divs. they will bring
            > you
            > more trouble than they are worth.
            >
            > you don't really need to set the height of the main div 100%.
            >
            > to set the footer at the bottom of the page, just put the footer div after
            > your body div tag. it will get pushed down as you enter content.
            >
            > to centre the main container, in css, set the container to your preffered
            > width.(think about your target audience)
            >
            > enter this code for your main container
            >
            > #container
            > {
            > width:xxxpx;
            > margin: 0 auto;
            > }
            >
            > this will center the main div.
            >

            • 3. Re: div tags
              jigen08 Level 1
              Thanks for the helpful and fast response, it helped tremendously.

              One further issue with these: adding the divs to the container div often leads to spaces between them. This is because I put the cursor in the container and hit return to stretch it down, otherwise the divs seem to stack on each other as I add them.

              Is there a quick way to get them all to touch top to bottom?

              Thanks again.

              • 4. Re: div tags
                malcster2 Level 1
                the divs will stack until you put content in them. thats how they work.

                type footer in the footer div, header in the header div and put your content in the content div, rather than just pressing enter. that will give you a better sense of whats going on.
                • 5. Re: div tags
                  Level 7
                  That's correct. The gaps you are seeing are caused by the default
                  top/bottom margins on the first tag you have placed in the <div>. In
                  Firefox (and others), these margins actually 'poke' through the container.
                  For example -

                  These two divs will be snug with each other:
                  <div style="background-color:blue;"> </div>
                  <div style="background-color:red;"> </div>

                  These two divs will not be snug with each other:
                  <div style="background-color:blue;"><p> </p></div>
                  <div style="background-color:red;"> </div>

                  You can fix this in several ways:

                  1. Add a border to the bottom of the top div, e.g.,

                  <div style="background-color:blue;border-bottom:1px solid
                  blue;"><p> </p></div>
                  <div style="background-color:red;"> </div>

                  2. Control the margins on the first tag in the div, e.g.,

                  <div style="background-color:blue;"><p
                  style="margin-bottom:0;"> </p></div>
                  <div style="background-color:red;"> </div>

                  See what I mean?

                  --
                  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
                  ==================


                  "malcster2" <webforumsuser@macromedia.com> wrote in message
                  news:gg616v$7mo$1@forums.macromedia.com...
                  > the divs will stack until you put content in them. thats how they work.
                  >
                  > type footer in the footer div, header in the header div and put your
                  > content
                  > in the content div, rather than just pressing enter. that will give you a
                  > better sense of whats going on.
                  >