0 Replies Latest reply on Feb 23, 2010 9:14 PM by emRae77

    Problems with CSS floats not previewing properly–clearing and float drop issues




      The main problem I'm having is my website's floats looking perfect in Dreamweaver

      Picture 20.png


      when I preview it in Safari and Firefox the background is missing for the main content.The picture below is the preview in Safari.

      Picture 21.png

      I've tried several different ways of clearing the floats so I see the white background but nothing seems to work. Here's what I've got right now:

      <br class="clear" /> <!----- this was put after my side bar and main content divs ----->


      and the CSS is:


      .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;


      I've used some simpler css such as: .clear {clear: both;} and what not but the preview still does not show my white background for the outerDiv. Any suggestions? I'm very new at using CSS floats so I bet there's some simple thing I'm just not aware of.


      ....And the for the preview in Firefox

      Picture 22.png

      My floats stack one on top of each other (float drop?) and to the right. Once again they look just fine in Dreamweaver. Here's the CSS I have set up for my floats:

          margin: 0 auto;
          padding: 0;
          text-align: left;


      #sideBar {
          float: left;
          width: 305px;
      #rightColumn {
          float: right;
          width: 525px;
          padding: 0;


      #footer {
          width: 830px;
          height: 68px;
          clear: both;



      The width of the sideBar and rightColumn floats add up to the 830px Content container div so I do not understand why they are dropping in the Firefox preview.


      Any and all help is greatly appreciated! I've tried tons of tutorials but I still can't seem to fix the preview problems.