2 Replies Latest reply on Jun 19, 2013 10:49 PM by Michael Farnbach

    more stupid float problems :(

    Michael Farnbach Level 1

      Hi all,

       

      I'm really not getting the floats right....

       

      http://makingdesign.com.au/index-new.html

       

      I want to delete the two top boxes from the right hand side, so there will be just 6 as apposed to the 8 there are now.

      When I do this, the bottom two divs go completely out of whack.

       

      groan.....

        • 1. Re: more stupid float problems :(
          MurraySummers Level 8

          Change this -

           

          #navigationalbar {

                    clear: none;

                    float: left;

                    height: 600px;

                    width: 210px;

                    margin-top: 20px;

                    border-right-width: 1px;

                    border-right-style: solid;

                    border-right-color: #B2D9EC;

                    padding-right: 20px;

          }

           

          to this -

           

          #navigationalbar {

                    clear: left;

                    float: left;

                    height: 600px;

                    width: 210px;

                    margin-top: 20px;

                    border-right-width: 1px;

                    border-right-style: solid;

                    border-right-color: #B2D9EC;

                    padding-right: 20px;

          }

           

          The problem was that the float of the boxes was not being cleared by the content underneath. You saw no impact of this because the width of your page prevented the navigation div from rising to the previous line to continue the float. When you removed the two terminal boxes, you changed that width allowing the following content to rise to that position. To solve the problem, just make the navigation element clear that float. Then it won't matter how wide the previous line is.

          • 2. Re: more stupid float problems :(
            Michael Farnbach Level 1

            Hi Murray,

             

            Success! I tried your method, and it still didn't work.

             

            But, I did this after a little more investigation

             

            #navigationalbar {

                            clear: left;

                      float: left;

                                  overflow: hidden;

                      height: 300px;

                      width: 210px;

                      margin-top: 20px;

                      border-right-width: 1px;

                      border-right-style: solid;

                      border-right-color: #B2D9EC;

                      padding-right: 20px;

             

            The 'overflow: hidden' fixed it.

             

            http://makingdesign.com.au/services.html

             

            here's the article

             

            http://www.quirksmode.org/css/clearing.html