4 Replies Latest reply on May 24, 2010 3:25 PM by Codefinger

    Is there a way to display floats correctly in Design View? (CS5)

    Codefinger Level 1

      Hi there,

       

      I'm setting up templates and snippets for my design team, they don't want to fuss with this that and the other. I figure fair enough, and everything's mostly going well, except that I'm experiencing difficulties in displaying floats in Design view.

       

      It's important to note that Live Preview displays beautifully, as does my output content, but in edit mode on design view... the floats aren't quite right. Developer note: I am using this to apply standardised 'clearance' across browsers and most platforms:

       

      @media screen {

          /* Clear fix */

           .clearfix:after {

                content: ".";

                display: block;

                height: 0;

                clear: both;

                visibility: hidden;

           }

           .clearfix { display: inline-block; }

           /* Hides from IE-mac \*/

           * html .clearfix { height: 1%; }

           .clearfix { display: block; }

          /* End hide from IE-mac */

      }

       

      I've attached two screenshots with annotations, instead of trying to convey this in text.

       

      A: Design Edit Mode

      dw_screenshot_a.gif

      Live View Mode

      dw_screenshot_b.gif

       

       

      Any and all help appreciated, thanks.

      - d

        • 1. Re: Is there a way to display floats correctly in Design View? (CS5)
          David_Powers Adobe Community Professional

          Codefinger wrote:

           

          I'm experiencing difficulties in displaying floats in Design view.

           

          It's important to note that Live Preview displays beautifully, as does my output content,

          I'm afraid that's all you can ask for. Live View was introduced to deal with the problems caused by the inability to get Design view to render everything accurately.

           

          It's possible that adopting a different approach in your CSS might solve the problem in Design view, but it is known that floats are the most problematic. If you're comfortable working in Code view, you can make edits to your HTML in Code view, and press F5 to update Live View.

          • 2. Re: Is there a way to display floats correctly in Design View? (CS5)
            jxlusa Level 2

            It will often work for me to add actual clear divs that are not really needed, just for DW.

             

            <div id="container">

              <div class="floatedStuff">

                stuff

              </div>

              <div class="floatedStuff">

                stuff

               </div>

              <div class="floatedStuff">

                stuff

               </div>

            <div style="clear: both; width: 100%; height: 1px;"></div>

            </div>

             

            You might also experiment with overflow: hidden; and height:100%; on the outer container.

            Sometimes it is just not going to work due to things like outlines on blcok level elements that are ony for editing purposes. They do take up room in the design view, which can make the widths not work out for floats,  even though they don't exist for regular browsers.

            • 3. Re: Is there a way to display floats correctly in Design View? (CS5)
              Codefinger Level 1

              Cheers for your reply David, unfortunately I'm in a situation where I'm setting these templates and objects up for designers, I am a developer myself and wouldn't normally touch WYSIWYG view with a 50 foot barge pole.

               

              Immediate problem aside for the moment, it has actually been an enlightening experience, I've been using DW as a site management, snippet and FTP tool for... 8 years? Something like that anyway, and I only really tried Design Mode when I went through a quick (and terrible) "Web Design" course.

               

              I've found with CS5 that the usage of Design Mode is fairly forgiving, and I never used to use the Assets panel until I recently watched Adobe TV's re-intro to the panel as part of my research for my other, color-inclined team members.

               

               

              -d

              • 4. Re: Is there a way to display floats correctly in Design View? (CS5)
                Codefinger Level 1

                Excellent, thanks for that jxlusa - yeah adding markup isn't something I'd normally consider! Have added that markup to my containing div now though, and also decided to give those clearance divs an alt attribute alt="PLACEHOLDER" so that I can batch remove them prior to production release.

                 

                Many thanks!

                 

                d