Question

can someone spot why this layout is breaking in IE6? have tried various options but still the same. please see screen shots for exact problem. thanks

Screen Shots

http://img232.imageshack.us/i/footerie6.png/

http://img546.imageshack.us/i/footerie7.png/

HTML

<div id="footer">
      <div class="footerLogos">

        <img src="images/psw.png" alt="Footer Divider" width="164" height="50" />
        <br /><br /><br />
        <div class="footerLogosText">
          Pocket Size Websites
        </div>

      </div>
      <div class="containerFooterBlock">
      <div class="footerTextabout">
            Quick Links<br />

              <br />
        <div class="footerTextContent">
          <ul>

            <li><a href="#">Unique Website Design & Development</a></li>
            <li>E-Commerce Shopping Carts</li>
            <li>Content Management Systems (CMS)</li>
            <li>Search Engine Optimization (SEO)</li>
            <li>Logo &amp; Brochure Design</li>
          </ul>

        </div>
            <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
      </div>


      <div class="footerTextabout">
            Resources<br />

              <br />
        <div class="footerTextContent">
              <ul>
             <li>Unique Website Design & Development</li>


            <li>E-Commerce Shopping Carts</li>


            <li>Content Management Systems (CMS)</li>


            <li>Search Engine Optimization (SEO)</li>


            <li>Web Hosting</li>


            <li>Logo &amp; Brochure Design</li>

          </ul>

          </div>

                  <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
      </div>
      <div class="footerTextabout">
            Blogs<br />

              <br />
          <div class="footerTextContent">
              <ul>
             <li>Unique Website Design & Development</li>


            <li>E-Commerce Shopping Carts</li>


            <li>Content Management Systems (CMS)</li>


            <li>Search Engine Optimization (SEO)</li>


            <li>Web Hosting</li>


            <li>Logo &amp; Brochure Design</li>

          </ul>

          </div>
                <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />-->

      </div>
      </div>
      <div id="footerText">
        &copy; some domain 2011
      </div>

  </div>

CSS

#footer
    {

            width: 999px;
            height:500px;
            margin: 0 auto;
            background-image: url(../images/footer-bg.png);
            background-position: center center;
            background-repeat: repeat-x;

    }

#footerText
    {

            text-align: center;
            padding: 38px 0 0 0;
            font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
            color: #000;

    }

.containerFooterBlock
    {

            float:left;
            width: 999px;
            padding: 3px 0 0 0;
            clear:both;

    }

.footerTextabout
    {

            width:280px;
            height:300px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: #fff;
            font-weight: normal;
            padding: 20px 0 0 36px;
            clear:none;

    }

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 10px;
            line-height: 30px;
            text-align:justify;

    }

.footerTextContent li
    {
            padding: 0 0 0 25px;
            list-style-type: none;
            background-image:url(../images/tick.png);
            background-position: left 7px;
            background-repeat: no-repeat



    }

.footerTextabout img
    {

            float:left;
            padding:10px 0 0 18px;

    }

.footerLogos
    {

            width:250px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: #666;
            font-weight: normal;
            padding: 15px 0 0 24px;


    }

.footerLogosText
    {

            width:250px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #999;
            font-weight: normal;
            padding: 2px 0 0 32px;

    }

.footerLogos img
    {

            float:left;
            padding:5px 0 5px 0;
            border: 1px solid black;

    }
            <div class="footerTextContent">
              <ul>

                <li><a href="#">Unique Website Design & Development</a></li>
                <li>E-Commerce Shopping Carts</li>
                <li>Content Management Systems (CMS)</li>
                <li>Search Engine Optimization (SEO)</li>
                <li>Logo &amp; Brochure Design</li>
              </ul>

            </div>
                <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
          </div>


          <div class="footerTextabout">
                Resources<br />

                  <br />
            <div class="footerTextContent">
                  <ul>
                 <li>Unique Website Design & Development</li>


                <li>E-Commerce Shopping Carts</li>


                <li>Content Management Systems (CMS)</li>


                <li>Search Engine Optimization (SEO)</li>


                <li>Web Hosting</li>


                <li>Logo &amp; Brochure Design</li>

              </ul>

              </div>

                      <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
          </div>
          <div class="footerTextabout">
                Blogs<br />

                  <br />
              <div class="footerTextContent">
                  <ul>
                 <li>Unique Website Design & Development</li>


                <li>E-Commerce Shopping Carts</li>


                <li>Content Management Systems (CMS)</li>


                <li>Search Engine Optimization (SEO)</li>


                <li>Web Hosting</li>


                <li>Logo &amp; Brochure Design</li>

              </ul>

              </div>
                    <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />-->

          </div>
          </div>
          <div id="footerText">
            &copy; some domain 2011
          </div>

      </div>

Answer 1

.footerLogos {
    width:999px;
}

I don’t see why that box should be so small since everything else is anyway displayed on its bottom.

Maybe with this you don’t need the float anymore.