10 Replies Latest reply on Sep 5, 2008 10:40 AM by Newsgroup_User

    Some form of float drop?

    wuxing8
      Please check my site:

      http://www.bodymindawakening.com/index3.html

      I have applied the line: <br class="clearfloat"/> to various places with no luck. I've also played with widths and padding and margins. Nothing seems to work. It looks fine in DWCS3 workspace. My browser is IE7.

      Can anyone tell why this is happening and how to fix it?

      Thank you
        • 1. Re: Some form of float drop?
          malcster2 Level 1
          how do you want it to look?

          if it's a case of you wanting everything to align at the top, you can just float the 3 divs to the left. in the right order of course

          obviousley, the combined widths have got to be narrower than the main wrapper
          • 2. Re: Some form of float drop?
            wuxing8 Level 1
            I want the three columns to line up under the graphic.

            I tried float left on various divs too:

            on the body: no change

            #maincontent: it drops in my workspace just like in the browser

            #container: everything shifts left (rather than centered in the window.)

            .style1 <h1> : no change

            .thrcolfixhdr.css #sidebar1 <div> : is already set to float left; remove it and then both the main content and right sidebar stay in line but drop below within the DW workspace and also in the browser.

            I'm doing al of this from the CSS Rule Definition, Category "Box"

            Am I doing something wrong? Can you possible give a step by step?

            Thanks!
            • 3. Re: Some form of float drop?
              Level 7
              wuxing8 wrote:
              > Please check my site:
              >
              > http://www.bodymindawakening.com/index3.html
              >
              > I have applied the line: <br class="clearfloat"/> to various places with no
              > luck. I've also played with widths and padding and margins. Nothing seems to
              > work. It looks fine in DWCS3 workspace. My browser is IE7.
              >
              > Can anyone tell why this is happening and how to fix it?
              >
              > Thank you
              >

              Try replacing yours for mine....

              .thrColFixHdr #mainContent {
              padding: 0 10px;
              width: 475px;
              background-color: #000;
              margin-left: 200px;
              }

              HTH

              --
              chin chin
              Sinclair
              • 4. Re: Some form of float drop?
                malcster2 Level 1
                i reckon if you position the header first
                then insert the left hand div, float left then the main content, float left, and the right hand side sidebar, float right.

                here is a very small example:
                http://www.malcmabe.co.uk/float.html

                and the css...

                #flright
                {
                background-color:#FF0000;
                float:right;
                margin:10px;
                }

                #flleft
                {
                background-color:#FF0000;
                float:left;
                margin:10px;
                }

                #main
                {
                background-color:#999900;
                margin:0 auto;
                float:left;
                width:90% ;
                margin-top:10px;
                }

                #header
                {
                background-color:#006699;
                width:100%;
                }

                #footer
                {
                background-color:#3333CC;
                width:100%;
                margin-top:10px;
                }

                as you want the 3 float to align at the top, there is no need to clear them.
                • 5. Re: Some form of float drop?
                  malcster2 Level 1
                  sorry... #footer should be
                  #footer
                  {
                  background-color:#3333CC;
                  width:100%;
                  margin-top:20px;
                  clear:both;
                  }
                  • 6. Re: Some form of float drop?
                    wuxing8 Level 1
                    Since I'm not understanding where I should place the css, this is my current css file (any suggested changes to accomplish my task?):

                    @charset "utf-8";
                    body {
                    font: 100% Verdana, Arial, Helvetica, sans-serif;
                    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                    padding: 0;
                    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
                    color: #000000;
                    background-color: #000000;
                    }
                    .thrColFixHdr #container {
                    width: 890px; /* the auto margins (in conjunction with a width) center the page */
                    border: 1px solid #000000;
                    text-align: left; /* this overrides the text-align: center on the body element. */
                    margin-top: 0;
                    margin-right: auto;
                    margin-bottom: 0;
                    margin-left: auto;
                    background-color: #000000;
                    }
                    .thrColFixHdr #header {
                    background-color: #000000;
                    margin-top: 10px;
                    }
                    .thrColFixHdr #header h1 {
                    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
                    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
                    }
                    .thrColFixHdr #sidebar1 {
                    width: 180px; /* padding keeps the content of the div away from the edges */
                    background-color: #000000;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    padding-left: 5px;
                    float: left;
                    }
                    .thrColFixHdr #sidebar2 {
                    float: right; /* since this element is floated, a width must be given */
                    width: 160px; /* padding keeps the content of the div away from the edges */
                    background-color: #000000;
                    padding-top: 15px;
                    padding-right: 10px;
                    padding-bottom: 15px;
                    }
                    .thrColFixHdr #mainContent {
                    width: 475px;
                    margin-top: 0;
                    margin-right: 200px;
                    margin-bottom: 0;
                    margin-left: 200px;
                    padding-top: 0;
                    padding-bottom: 0;
                    background-color: #000000;
                    padding-right: 10px;
                    padding-left: 10px;
                    }
                    .thrColFixHdr #footer {
                    padding: 0 10px 0 20px;
                    font-size: 12px;
                    color: #FFFFFF;
                    background-color: #000000;
                    }
                    .thrColFixHdr #footer p {
                    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
                    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
                    }
                    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
                    float: right;
                    margin-left: 8px;
                    }
                    .fltlft { /* this class can be used to float an element left in your page */
                    float: left;
                    margin-right: 8px;
                    }
                    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
                    clear:both;
                    height:0;
                    font-size: 1px;
                    line-height: 0px;
                    }
                    • 7. Re: Some form of float drop?
                      malcster2 Level 1
                      replace: .thrColFixHdr #mainContent {
                      width: 475px;
                      margin-top: 0;
                      margin-right: 200px;
                      margin-bottom: 0;
                      margin-left: 200px;
                      padding-top: 0;
                      padding-bottom: 0;
                      background-color: #000000;
                      padding-right: 10px;
                      padding-left: 10px;
                      }

                      with
                      .thrColFixHdr #mainContent {
                      width: 475px;
                      margin-top: 0;
                      margin-right: 200px;
                      margin-bottom: 0;
                      margin-left: 200px;
                      padding-top: 0;
                      padding-bottom: 0;
                      background-color: #000000;
                      padding-right: 10px;
                      padding-left: 10px;
                      float:left;
                      }

                      if it doesn't squeeze in, adjust the left/right margins
                      • 8. Some form of float drop?
                        wuxing8 Level 1
                        Okay, I caught something in your css that I hadn't tried. When I set the left margin: "auto" for the main content, it stays where it's supposed to. (Float left on the #maincontent kept dropping it even in my workspace).

                        Thanks!
                        • 9. Re: Some form of float drop?
                          Level 7
                          wuxing8 wrote:
                          > Okay, I caught something in your css that I hadn't tried. When I set the margin: auto for the main content, it stays where it's supposed to.
                          >
                          > Thanks!

                          Fails in IE6 - see my post!

                          --
                          chin chin
                          Sinclair
                          • 10. Re: Some form of float drop?
                            malcster2 Level 1
                            yeah, you've got 400px worth of margins on your main conent, plus the 475px width. that 875px, in a 890px wrapper. and thats without taking into account the sidebars