4 Replies Latest reply: Aug 6, 2009 1:25 PM by upstart1762 RSS

    Floating issue

    upstart1762 Community Member

      I have a sidebar div floated left (with a background gif), and a main content div (with dark grey background) so they sit nicely next to each other. When I insert an image into the main content div, both divs stay in place, but the content is pushed below (the inserted image is being blocked from floating within its parent div).

       

      See attached.

       

      So far, floating divs seems to work perfectly until I actually try to add content inside those divs. Then it falls apart. Not good. Any suggested fixes? 

       

      Picture 4 14-37-34.png

        • 1. Re: Floating issue
          Zabeth69 CommunityMVP

          Hi, Up,

           

          Can you upload the file so we can take a look at the code in action?

           

          Take a look at your img dimensions. Have you set the gray-backgrounded <div> with Overflow: hidden; ? That should keep the <div> from trying to expand when you insert the image. Watch out for margins and padding on the image.

           

          Have you tried inserting just html? Presumably it does not break then.

           

          Z

          • 2. Re: Floating issue
            upstart1762 Community Member

            While I was waiting I cleared out the divs and the css, and I rebuilt. And now it is working. See attached. I'm new to this. Are these files still very quirky and prone to corruption? Because I had the exact same code in the old version.

             

            I've also been playing with positioning using absolute positioning (inside a "relatively-positioned container). Do most developers prefer floating or using "positioning"? Each seems to present its own special problems.

             

             

             

            Picture 4.png

            • 3. Re: Floating issue
              Zabeth69 CommunityMVP

              There are many tools in a developer's toolbox. Sometimes one tool seems more appropriate, sometimes another.

               

              Your best bet is to learn both and make your own choice, depending on how it will be used. I think a lot of how code is used ties in with the way you are thinking about the site you are building, how you have conceptualized it, and the pieces you are fitting together to build it, and those are perforce quite individual, developer to developer.

               

              An unnoticed unclosed CSS statement or an extra space where it doesn't belong can break code.

               

              I think you handled it correctly by deleting and rewriting. It's a much cleaner approach than to try to jigger code that has an error in it somewhere.

               

              You should also make use of Validation tools to help check your code for you. There's one integral to Dreamweaver, and many developers also use Validator tools on the Web.

               

              Z

               

               

              • 4. Re: Floating issue
                upstart1762 Community Member

                I'm sure you are right. Seems that each approach comes with its own pitfalls and risks - one solution presents a series of subsequent challenges and chain reactions. I should be bald by September. Thanks!