7 Replies Latest reply on Jul 25, 2007 5:52 AM by Newsgroup_User

    basic width misunderstanding

    Level 7
      Trying out CS3 and it's spry menu, I hit (apart from the expected CS3 trouble)
      on a very basic problem. On this page http://www.ochrid.dds.nl/vlinderTest.htm
      ,
      the container is set to a width of 80% and the left sidebar to 24%. So I
      thought I could set the width of the main container to 76%, totalling 100 % of
      the container.

      Not so: IE7 is very tolerant, but FF pushed the mainContent div down. Fixing
      it's width to 60% makes it allright in FF too, but surely this is not an
      elegant solution.

      What is wrong with my resoning? (Once I have figured this out, perhaps I'll
      figure out how to stretch the width of the menubar...)

      --
      Regards,
      Adriana.
      [ put out the rubbish if you need to reach me by e-mail ]
      www.spinsister.nl


        • 1. Re: basic width misunderstanding
          Level 7
          > Trying out CS3 and it's spry menu, I hit (apart from the expected CS3
          > trouble) on a very basic problem. On this page
          > http://www.ochrid.dds.nl/vlinderTest.htm ,
          > the container is set to a width of 80% and the left sidebar to 24%. So I
          > thought I could set the width of the main container to 76%, totalling 100 %
          > of the container.

          > Not so: IE7 is very tolerant, but FF pushed the mainContent div down. Fixing
          > it's width to 60% makes it allright in FF too, but surely this is not an
          > elegant solution.

          > What is wrong with my resoning? (Once I have figured this out, perhaps I'll
          > figure out how to stretch the width of the menubar...)

          Is my question too stupid? I really want to know how I should calculate the
          width or whether the problem is elsewhere.

          --
          Regards,
          Adriana.
          [ put out the rubbish if you need to reach me by e-mail ]
          www.spinsister.nl


          • 2. Re: basic width misunderstanding
            Level 7
            A.Translator wrote:
            > What is wrong with my resoning? (Once I have figured this out, perhaps
            > I'll figure out how to stretch the width of the menubar...)

            The 20px padding on #mainContent is added to width, causing it to drop
            down. Remove the padding and change the width to 75%, and it comes back up.

            When using percentage widths never use numbers that add up to exactly
            100, because rounding errors will often make your floats drop down. Use
            figures that add up to 98% or 99%.

            --
            David Powers, Adobe Community Expert
            Author, "The Essential Guide to Dreamweaver CS3" (friends of ED)
            Author, "PHP Solutions" (friends of ED)
            http://foundationphp.com/
            • 3. Re: basic width misunderstanding
              Level 7
              >> What is wrong with my resoning? (Once I have figured this out, perhaps I'll
              >> figure out how to stretch the width of the menubar...)

              > The 20px padding on #mainContent is added to width, causing it to drop down.
              > Remove the padding and change the width to 75%, and it comes back up.

              > When using percentage widths never use numbers that add up to exactly 100,
              > because rounding errors will often make your floats drop down. Use figures
              > that add up to 98% or 99%.

              Thank you, David! Again.

              --
              Regards,
              Adriana.
              [ put out the rubbish if you need to reach me by e-mail ]
              www.spinsister.nl


              • 4. Re: basic width misunderstanding
                Level 7
                A.Translator wrote:
                > Thank you, David! Again.

                My pleasure, Adriana.

                --
                David Powers, Adobe Community Expert
                Author, "The Essential Guide to Dreamweaver CS3" (friends of ED)
                Author, "PHP Solutions" (friends of ED)
                http://foundationphp.com/
                • 5. Re: basic width misunderstanding
                  818g Level 1
                  Your #mainContent div has a 60% width, a 20px padding on both sides, and a 1px border on the left. All these values add up, so it's total width is 60%+40px+1px at the moment.

                  When its width was set to 76%, its total width was 76%+40px+1px.

                  The sidebar1 div has a 24% width, so the grand total was 24%+76%+40px+1px. This was 41pixels wider than 100%.

                  Your #mainContent div was pushed down in Firefox simply because there was not enough room for it.
                  • 6. Re: basic width misunderstanding
                    818g Level 1
                    Oooops, I doubleanswered it... my bad.

                    Here was only the question when I started to type my post, but I was slow a little bit.

                    Is 3:00 AM a valid excuse?
                    • 7. Re: basic width misunderstanding
                      Level 7
                      > Oooops, I doubleanswered it... my bad.

                      > Here was only the question when I started to type my post, but I was slow a
                      > little bit.

                      > Is 3:00 AM a valid excuse?

                      No excuse needed. I appreciate both answers and explanations. It is I who
                      should apologise for what was indeed a question I should have figured out
                      myself.

                      --
                      Regards,
                      Adriana.
                      [ put out the rubbish if you need to reach me by e-mail ]
                      www.spinsister.nl