9 Replies Latest reply on Dec 9, 2008 4:05 AM by Newsgroup_User

    Css Styles - containers - Div-tag

    mightyxena
      I'm creating a layout with div-tags.

      It is based on the below. I want the "left" and "right" column (which are in the "content") side by side.
      <div id="container">
      <div id="header"></div>
      <div id="rightcolumn">links and things go here</div>
      <div id="leftcolumn"> links and things go here </div>
      <div> id="content">my content goes here</div>
      <div id="footer">my footer links go here</div>
      </div>

      Either I did place them both wrongly into the "content" or I'm messing up with the positioning. I have problems to understand absolute and relatif as DW8 is completely new to me.

      Below is my CSS file

      body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      margin: 0px;
      padding: 0px;
      }
      #leftcolumn {
      background-color: #E8E8E8;
      width: 300px;
      margin-top: 0px;
      margin-right: 700px;
      margin-bottom: 0px;
      margin-left: 0px;
      }
      #rightcolumn {
      background-color: #CCEEFF;
      width: 700px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 300px;
      top: auto;
      left: 181px;
      position: absolute;
      }


      #container {
      background-color: #ECAB13;
      width: 1010px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      }
      #header {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #FFFF66;
      width: 1000px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      padding: 0px;
      }
      #menubar {
      background-color: #CCCCCC;
      width: 1000px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      }
      #content {
      background-color: #FFFF99;
      width: 1000px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      }
      #footer {
      background-color: #CCFFFF;
      width: 1000px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      }
      #Layerright {
      background-color: #999999;
      width: 788px;
      }

      Thanks for helping me out

      Martine
        • 1. Re: Css Styles - containers - Div-tag
          Level 7
          Try this -

          <style type="text/css">
          body {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          margin: 0px;
          padding: 0px;
          }
          #leftcolumn {
          background-color: #E8E8E8;
          width: 300px;
          margin: 0 0 0 10px;;
          float:left;
          }
          #rightcolumn {
          background-color: #CEF;
          width: 690px;
          margin: 0;
          float:left;
          }
          #container {
          background-color: #ECAB13;
          width: 1010px;
          margin: 0 auto;
          }
          #header {
          background-color: #FF6;
          width: 1000px;
          margin: 0 auto;
          padding: 0;
          }
          #menubar {
          background-color: #CCC;
          width: 1000px;
          margin: 0 auto;
          }
          #content {
          background-color: #FF9;
          width: 1000px;
          margin: 0 auto;
          }
          #footer {
          background-color: #CFF;
          width: 1000px;
          margin: 0 auto;
          }
          </style></head>

          <body>
          <div id="container">
          <div id="header"></div>
          <div id="leftcolumn"> links and things go here </div>
          <div id="rightcolumn">links and things go here</div>
          <div id="content">my content goes here</div>
          <div id="footer">my footer links go here</div>
          </div>
          </body>
          </html>

          No need for any positioning at all.

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


          "mightyxena" <webforumsuser@macromedia.com> wrote in message
          news:gg1qip$l5k$1@forums.macromedia.com...
          > I'm creating a layout with div-tags.
          >
          > It is based on the below. I want the "left" and "right" column (which are
          > in
          > the "content") side by side.
          > <div id="container">
          > <div id="header"></div>
          > <div id="rightcolumn">links and things go here</div>
          > <div id="leftcolumn"> links and things go here </div>
          > <div> id="content">my content goes here</div>
          > <div id="footer">my footer links go here</div>
          > </div>
          >
          > Either I did place them both wrongly into the "content" or I'm messing up
          > with
          > the positioning. I have problems to understand absolute and relatif as
          > DW8 is
          > completely new to me.
          >
          > Below is my CSS file
          >
          > body {
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > margin: 0px;
          > padding: 0px;
          > }
          > #leftcolumn {
          > background-color: #E8E8E8;
          > width: 300px;
          > margin-top: 0px;
          > margin-right: 700px;
          > margin-bottom: 0px;
          > margin-left: 0px;
          > }
          > #rightcolumn {
          > background-color: #CCEEFF;
          > width: 700px;
          > margin-top: 0px;
          > margin-right: 0px;
          > margin-bottom: 0px;
          > margin-left: 300px;
          > top: auto;
          > left: 181px;
          > position: absolute;
          > }
          >
          >
          > #container {
          > background-color: #ECAB13;
          > width: 1010px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > }
          > #header {
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > background-color: #FFFF66;
          > width: 1000px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > padding: 0px;
          > }
          > #menubar {
          > background-color: #CCCCCC;
          > width: 1000px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > }
          > #content {
          > background-color: #FFFF99;
          > width: 1000px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > }
          > #footer {
          > background-color: #CCFFFF;
          > width: 1000px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0px;
          > margin-left: auto;
          > }
          > #Layerright {
          > background-color: #999999;
          > width: 788px;
          > }
          >
          > Thanks for helping me out
          >
          > Martine
          >

          • 2. Re: Css Styles - containers - Div-tag
            mightyxena Level 1
            Murraym,

            It worked perfectly. I had to remake the footer and then it all fits perfect.

            I noticed that when I add something one column the other remains untouched. So I amended the background to equal color and when testing in the browser it shows one perfect page.

            Don't think you can enlarge automatically the other column when enlarging the other? That would be to much technique asked!!!!

            Anyhow the result is good enough for a starter as m.

            Below the final result in the code and in the css file. If there is something to be fixed thanks for telling me.

            Many thanks
            Martine

            The final result in the code
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Untitled Document</title>
            <link href="container.css" rel="stylesheet" type="text/css" />
            </head>

            <body>

            <div id="container">
            <div id="header">
            <p align="right"><img src="images/testbanner2.jpg" width="750" height="250" /></p>
            </div>
            <div id="menubar">
            <p>This is the space where my navigation bar or menu bar will come. Less 10px width as the container, so when expanded it fits the page nicely </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            </div>
            <div id="content">
            <div id="leftcolumn">
            <p>Content for id "leftcolumn" Goes Here such as links to forums, blogs, etc.......... </p>
            <p> </p>
            <p> </p>
            <p> </p>
            </div>
            <div id="rightcolumn">
            <p>Content for id "rightcolumn" Goes Here </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            </div>
            </div>

            <div id="footer">Content for id "footer" Goes Here</div>
            </div>
            </body>
            The final result of the CSS file
            body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin: 0px;
            padding: 0px;
            }
            #leftcolumn {
            background-color: #CCEEFF;
            width: 300px;
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            float: left;
            margin-right: 0px;
            }
            #rightcolumn {
            background-color: #CCEEFF;
            width: 700px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            float: left;
            }
            #footer {
            width: 1000px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            background-color: #FF99FF;
            }



            #container {
            background-color: #FF9900;
            width: 1000px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            }
            #header {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            background-color: #111401;
            width: 1000px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            padding: 0px;
            }
            #menubar {
            background-color: #CCCCCC;
            width: 1000px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            }
            #content {
            background-color: #CCEEFF;
            width: 1000px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
            }
            • 3. Re: Css Styles - containers - Div-tag
              Level 7
              > Don't think you can enlarge automatically the other column when enlarging
              > the
              > other? That would be to much technique asked!!!!

              Try this code -

              <!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>
              <link href="container.css" rel="stylesheet" type="text/css" />
              <style type="text/css">
              body {
              font-family: Verdana, Arial, Helvetica, sans-serif;
              margin: 0px;
              padding: 0px;
              }
              #leftcolumn, #rightcolumn,#footer, #container, #header, #menubar, #content {
              margin:0 auto;
              }
              #leftcolumn {
              background-color: #CEF;
              width: 300px;
              float: left;
              }
              #rightcolumn {
              background-color: #CEF;
              width: 700px;
              float: left;
              }
              #footer {
              width: 1000px;
              background-color: #F9F;
              }
              #container {
              background-color: #F90;
              width: 1000px;
              }
              #header {
              font-family: Verdana, Arial, Helvetica, sans-serif;
              background-color: #111401;
              width: 1000px;
              padding: 0px;
              }
              #menubar {
              background-color: #CCC;
              width: 1000px;
              }
              #content {
              background-color: #CEF;
              width: 1000px;
              overflow:hidden;
              }
              </style>
              </head>
              <body>
              <div id="container">
              <div id="header">
              <p align="right"><img src="images/testbanner2.jpg" width="750"
              height="250" /></p>
              </div>
              <div id="menubar">
              <p>This is the space where my navigation bar or menu bar will come. Less
              10px width as the container, so when expanded it fits the page nicely
              </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              </div>
              <div id="content">
              <div id="leftcolumn">
              <p>Content for id "leftcolumn" Goes Here such as links to forums,
              blogs,
              etc.......... </p>
              <p> </p>
              <p> </p>
              <p> </p>
              </div>
              <div id="rightcolumn">
              <p>Content for id "rightcolumn" Goes Here </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              <p> </p>
              </div>
              </div>
              <div id="footer">Content for id "footer" Goes Here</div>
              </div>
              </body>
              </html>


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


              "mightyxena" <webforumsuser@macromedia.com> wrote in message
              news:ggbof0$gig$1@forums.macromedia.com...
              > Murraym,
              >
              > It worked perfectly. I had to remake the footer and then it all fits
              > perfect.
              >
              > I noticed that when I add something one column the other remains
              > untouched.
              > So I amended the background to equal color and when testing in the browser
              > it
              > shows one perfect page.
              >
              > Don't think you can enlarge automatically the other column when enlarging
              > the
              > other? That would be to much technique asked!!!!
              >
              > Anyhow the result is good enough for a starter as m.
              >
              > Below the final result in the code and in the css file. If there is
              > something
              > to be fixed thanks for telling me.
              >
              > Many thanks
              > Martine
              >
              > The final result in the code
              > <head>
              > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              > <title>Untitled Document</title>
              > <link href="container.css" rel="stylesheet" type="text/css" />
              > </head>
              >
              > <body>
              >
              > <div id="container">
              > <div id="header">
              > <p align="right"><img src="images/testbanner2.jpg" width="750"
              > height="250" /></p>
              > </div>
              > <div id="menubar">
              > <p>This is the space where my navigation bar or menu bar will come.
              > Less
              > 10px width as the container, so when expanded it fits the page nicely </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > </div>
              > <div id="content">
              > <div id="leftcolumn">
              > <p>Content for id "leftcolumn" Goes Here such as links to forums,
              > blogs,
              > etc.......... </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > </div>
              > <div id="rightcolumn">
              > <p>Content for id "rightcolumn" Goes Here </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > <p> </p>
              > </div>
              > </div>
              >
              > <div id="footer">Content for id "footer" Goes Here</div>
              > </div>
              > </body>
              > The final result of the CSS file
              > body {
              > font-family: Verdana, Arial, Helvetica, sans-serif;
              > margin: 0px;
              > padding: 0px;
              > }
              > #leftcolumn {
              > background-color: #CCEEFF;
              > width: 300px;
              > margin-top: 0px;
              > margin-bottom: 0px;
              > margin-left: 0px;
              > float: left;
              > margin-right: 0px;
              > }
              > #rightcolumn {
              > background-color: #CCEEFF;
              > width: 700px;
              > margin-top: 0px;
              > margin-right: 0px;
              > margin-bottom: 0px;
              > margin-left: 0px;
              > float: left;
              > }
              > #footer {
              > width: 1000px;
              > margin-top: 0px;
              > margin-right: auto;
              > margin-bottom: 0px;
              > margin-left: auto;
              > background-color: #FF99FF;
              > }
              >
              >
              >
              > #container {
              > background-color: #FF9900;
              > width: 1000px;
              > margin-top: 0px;
              > margin-right: auto;
              > margin-bottom: 0px;
              > margin-left: auto;
              > }
              > #header {
              > font-family: Verdana, Arial, Helvetica, sans-serif;
              > background-color: #111401;
              > width: 1000px;
              > margin-top: 0px;
              > margin-right: auto;
              > margin-bottom: 0px;
              > margin-left: auto;
              > padding: 0px;
              > }
              > #menubar {
              > background-color: #CCCCCC;
              > width: 1000px;
              > margin-top: 0px;
              > margin-right: auto;
              > margin-bottom: 0px;
              > margin-left: auto;
              > }
              > #content {
              > background-color: #CCEEFF;
              > width: 1000px;
              > margin-top: 0px;
              > margin-right: auto;
              > margin-bottom: 0px;
              > margin-left: auto;
              > }
              >
              >

              • 4. Re: Css Styles - containers - Div-tag
                mightyxena Level 1
                Murray,
                What did you change here? Can't find the changes you made.

                Would like to know it.

                Many thanks
                Martine
                • 5. Re: Css Styles - containers - Div-tag
                  Level 7
                  Compare your CSS and HTML to mine -

                  YOURS
                  body {
                  font-family: Verdana, Arial, Helvetica, sans-serif;
                  margin: 0px;
                  padding: 0px;
                  }
                  #leftcolumn {
                  background-color: #E8E8E8;
                  width: 300px;
                  margin-top: 0px;
                  margin-right: 700px;
                  margin-bottom: 0px;
                  margin-left: 0px;
                  }
                  #rightcolumn {
                  background-color: #CCEEFF;
                  width: 700px;
                  margin-top: 0px;
                  margin-right: 0px;
                  margin-bottom: 0px;
                  margin-left: 300px;
                  top: auto;
                  left: 181px;
                  position: absolute;
                  }


                  #container {
                  background-color: #ECAB13;
                  width: 1010px;
                  margin-top: 0px;
                  margin-right: auto;
                  margin-bottom: 0px;
                  margin-left: auto;
                  }
                  #header {
                  font-family: Verdana, Arial, Helvetica, sans-serif;
                  background-color: #FFFF66;
                  width: 1000px;
                  margin-top: 0px;
                  margin-right: auto;
                  margin-bottom: 0px;
                  margin-left: auto;
                  padding: 0px;
                  }
                  #menubar {
                  background-color: #CCCCCC;
                  width: 1000px;
                  margin-top: 0px;
                  margin-right: auto;
                  margin-bottom: 0px;
                  margin-left: auto;
                  }
                  #content {
                  background-color: #FFFF99;
                  width: 1000px;
                  margin-top: 0px;
                  margin-right: auto;
                  margin-bottom: 0px;
                  margin-left: auto;
                  }
                  #footer {
                  background-color: #CCFFFF;
                  width: 1000px;
                  margin-top: 0px;
                  margin-right: auto;
                  margin-bottom: 0px;
                  margin-left: auto;
                  }
                  #Layerright {
                  background-color: #999999;
                  width: 788px;
                  }
                  <body>
                  <div id="container">
                  <div id="header"></div>
                  <div id="rightcolumn">links and things go here</div>
                  <div id="leftcolumn"> links and things go here </div>
                  <div> id="content">my content goes here</div>
                  <div id="footer">my footer links go here</div>
                  </div>



                  MINE
                  body {
                  font-family: Verdana, Arial, Helvetica, sans-serif;
                  margin: 0px;
                  padding: 0px;
                  }
                  #leftcolumn {
                  background-color: #E8E8E8;
                  width: 300px;
                  margin: 0 0 0 10px;;
                  float:left;
                  }
                  #rightcolumn {
                  background-color: #CEF;
                  width: 690px;
                  margin: 0;
                  float:left;
                  }
                  #container {
                  background-color: #ECAB13;
                  width: 1010px;
                  margin: 0 auto;
                  }
                  #header {
                  background-color: #FF6;
                  width: 1000px;
                  margin: 0 auto;
                  padding: 0;
                  }
                  #menubar {
                  background-color: #CCC;
                  width: 1000px;
                  margin: 0 auto;
                  }
                  #content {
                  background-color: #FF9;
                  width: 1000px;
                  margin: 0 auto;
                  }
                  #footer {
                  background-color: #CFF;
                  width: 1000px;
                  margin: 0 auto;
                  }
                  <body>
                  <div id="container">
                  <div id="header"></div>
                  <div id="leftcolumn"> links and things go here </div>
                  <div id="rightcolumn">links and things go here</div>
                  <div id="content">my content goes here</div>
                  <div id="footer">my footer links go here</div>
                  </div>
                  </body>
                  </html>




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


                  "mightyxena" <webforumsuser@macromedia.com> wrote in message
                  news:ghgja1$f26$1@forums.macromedia.com...
                  > Murray,
                  > What did you change here? Can't find the changes you made.
                  >
                  > Would like to know it.
                  >
                  > Many thanks
                  > Martine
                  >

                  • 6. Re: Css Styles - containers - Div-tag
                    mightyxena Level 1
                    You are a wizard Murray.

                    Now how do I apply this css layout to all my pages or how must I proceed when I create a new page and want to have the same layout as created in this CSS?

                    Martine
                    • 7. Re: Css Styles - containers - Div-tag
                      Level 7
                      Use DW Templates (use F1 to read about them).

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


                      "mightyxena" <webforumsuser@macromedia.com> wrote in message
                      news:ghjm8q$d6e$1@forums.macromedia.com...
                      > You are a wizard Murray.
                      >
                      > Now how do I apply this css layout to all my pages or how must I proceed
                      > when I create a new page and want to have the same layout as created in
                      > this CSS?
                      >
                      > Martine

                      • 8. Re: Css Styles - containers - Div-tag
                        mightyxena Level 1
                        Right Murray,

                        Thought already that I had to make a template. Sounds logic.

                        Many thanks for assistance.

                        martine
                        • 9. Re: Css Styles - containers - Div-tag
                          Level 7
                          Good luck!

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


                          "mightyxena" <webforumsuser@macromedia.com> wrote in message
                          news:ghl8jt$dvt$1@forums.macromedia.com...
                          > Right Murray,
                          >
                          > Thought already that I had to make a template. Sounds logic.
                          >
                          > Many thanks for assistance.
                          >
                          > martine