3 Replies Latest reply on Aug 25, 2006 8:54 AM by Newsgroup_User

    help with basic CSS positioning

    socks_
      I am learning the rudiments of CSS positioning - I have gone through the good Macromedia docs and even bought a book which is useful (HTML Utopia). I am now applying some concepts to my first site.

      Oh how I thought I knew how to apply theory.

      The sily thing is I am stuck on a very basic stage. And I just cant figure out the solution. This is my problem.

      I want to centre my site on the page so I created a #wrapper <div> which works fine

      Then, I wanted to position two <div> 'boxes', each containing a logo within this wrapper, next to each other, left to right, with a small margin imbetween them.

      The first box on the left aligns fine, relatively positioned to the wrapper. Great.

      However, the next box 'jumps' down to the next line, even though there is space within the wrapper element for it. I assumed as <div> tag elements 'flow' after each other, it would continue right. But no, it flows onto the next line, a bit like this

      image 1
      image 2

      I was after

      image 1 image 2

      What am I doing wrong. Im sure Im missing the obvious. Should I be floating at this stage?

      Forgive me - Im grasping the concepts here

      Heres the code:

      CSS
      #master_wrapper {
      width: 760px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: auto;
      margin-left: auto;
      position: relative;
      }

      #logo_box {
      width: 145px;
      height: 120px;
      position: relative;
      }

      #banner_box {
      width: 580px;
      height: 120px;
      margin-top: 0;
      margin-left: 25px;
      position: relative;
      }


      HTML

      <body>
      <div id="master_wrapper">

      <div id="logo_box"><img src="website_graphics/index_page/logo.jpg" alt="Logo" width="145" height="120" />
      </div>

      <div id="banner_box"><img src="website_graphics/index_page/banner_cityscape.jpg" alt="Banner" width="580" height="120"/>
      </div>
      </body>

      If you are feeling especially kind, could you let me know the correct code to position a further 2 boxes which sit under the logo and the banner respectively

      Yours, cap in hand

      Chris
        • 1. Re: help with basic CSS positioning
          Level 7
          > The first box on the left aligns fine, relatively positioned to the
          > wrapper.
          > Great.

          Remove the relative positioning. You don't need it. Now, float that box
          left.

          > However, the next box 'jumps' down to the next line, even though there is
          > space within the wrapper element for it. I assumed as <div> tag elements
          > 'flow'
          > after each other, it would continue right. But no, it flows onto the next
          > line,
          > a bit like this

          Div tags are block tags - that means that unless told not to, the occupy the
          entire line within their container, thus forcing them to a new line, and all
          adjacent content above and below.

          Remove the position:relative from all your divs, and just make the first two
          float left.

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


          "socks_" <webforumsuser@macromedia.com> wrote in message
          news:ecn38g$j3u$1@forums.macromedia.com...
          >I am learning the rudiments of CSS positioning - I have gone through the
          >good
          > Macromedia docs and even bought a book which is useful (HTML Utopia). I am
          > now
          > applying some concepts to my first site.
          >
          > Oh how I thought I knew how to apply theory.
          >
          > The sily thing is I am stuck on a very basic stage. And I just cant figure
          > out
          > the solution. This is my problem.
          >
          > I want to centre my site on the page so I created a #wrapper <div> which
          > works
          > fine
          >
          > Then, I wanted to position two <div> 'boxes', each containing a logo
          > within
          > this wrapper, next to each other, left to right, with a small margin
          > imbetween
          > them.
          >
          > The first box on the left aligns fine, relatively positioned to the
          > wrapper.
          > Great.
          >
          > However, the next box 'jumps' down to the next line, even though there is
          > space within the wrapper element for it. I assumed as <div> tag elements
          > 'flow'
          > after each other, it would continue right. But no, it flows onto the next
          > line,
          > a bit like this
          >
          > image 1
          > image 2
          >
          > I was after
          >
          > image 1 image 2
          >
          > What am I doing wrong. Im sure Im missing the obvious. Should I be
          > floating at
          > this stage?
          >
          > Forgive me - Im grasping the concepts here
          >
          > Heres the code:
          >
          > CSS
          > #master_wrapper {
          > width: 760px;
          > margin-top: 0px;
          > margin-bottom: 0px;
          > margin-right: auto;
          > margin-left: auto;
          > position: relative;
          > }
          >
          > #logo_box {
          > width: 145px;
          > height: 120px;
          > position: relative;
          > }
          >
          > #banner_box {
          > width: 580px;
          > height: 120px;
          > margin-top: 0;
          > margin-left: 25px;
          > position: relative;
          > }
          >
          >
          > HTML
          >
          > <body>
          > <div id="master_wrapper">
          >
          > <div id="logo_box"><img src="website_graphics/index_page/logo.jpg"
          > alt="Logo"
          > width="145" height="120" />
          > </div>
          >
          > <div id="banner_box"><img
          > src="website_graphics/index_page/banner_cityscape.jpg" alt="Banner"
          > width="580"
          > height="120"/>
          > </div>
          > </body>
          >
          > If you are feeling especially kind, could you let me know the correct code
          > to
          > position a further 2 boxes which sit under the logo and the banner
          > respectively
          >
          > Yours, cap in hand
          >
          > Chris
          >


          • 2. Re: help with basic CSS positioning
            socks_ Level 1
            your the man

            • 3. Re: help with basic CSS positioning
              Level 7
              Only until the next problem arises, though.... 8)

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


              "socks_" <webforumsuser@macromedia.com> wrote in message
              news:ecn61l$mfq$1@forums.macromedia.com...
              > your the man
              >
              >