3 Replies Latest reply on May 21, 2010 2:04 PM by Zabeth69

    Float/ Positioning Issue

    jdldn Level 1

      On this page;


      If you click 'Industrial Chillers', you can see im having trouble positing a div.


      There is an image and a div called ‘leftdiv’. I want leftdiv to sit next to the image. So long as the image is taller than than the div, everything works fine.


      However if the content in the div is taller than the image, then when the content gets below the image, it doesn't stay inline with the content above, and instead moves to the left.


      You can see what i mean here;


      How can i fix this? If I float leftdiv to the left and specify a width then i can make it work but i dont want to have to specify a width for each one.

        • 1. Re: Float/ Positioning Issue
          Nancy OShea Adobe Community Professional & MVP

          Example #1 in your JPG is exactly how floats work.  Text wraps around the floated image.


          To achieve what you want in Example #2, either use a table (probably the simplest solution).

          Or, or add another container to your page to hold the text.


          See Example:




          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists

          1 person found this helpful
          • 2. Re: Float/ Positioning Issue
            jdldn Level 1

            So is the only way to achive what I want to set a width for leftdiv?

            • 3. Re: Float/ Positioning Issue
              Zabeth69 Level 5

              In a word, yes. When you set a div to "float", you have taken it out of the sequence of your page and your following content will 'flow' up around it. If the following content runs deeper than your floated div, it will 'wrap' your div.


              To guard against this when you want your content to 'fall down straight and not wrap', you will set a margin on your content that is wider than your floated div, like this:

              .floatleft {

                   float: left;

                   width: 100px;

                   background-color: white;

                   border: solid 1px green;


              #content2 {

                   margin-left: 110px;


              #container {

                   background-color: red;

                   width: 30%;


              and set the html like this:

              <div id="container">

                   <div class="floatleft">

                       This is the content in the floated container


                  <div id="content2">This is the content in the larger container. WIth luck, it will have a red background! And soon, it should have</div>


              This should fix you up.



              1 person found this helpful