3 Replies Latest reply: Feb 22, 2013 7:48 AM by roselaw2702 RSS

    Clearing Spry float without clearing all float

    roselaw2702

      I'm trying to get a page with a proper menu (cue the spry), but cannot fix a problem on the home page. On all other pages, I simply put in

      clear: both;

      under the div tag for the first div, but on my home page I have three div's floated so that they appear on the same line. I can't figure out how, if it's possible at all, to clear the float from the spry menu bar (in the newest version) ONLY regarding the first (or first three) div. I tried adding a margin both below the spry div and above the content div, but that didn't do anything visible. I have not messed with the original spry files, only the css and html that I created for the page. It will drop down in screens below a certain resolution (as the div has a minimum width), so my problem is pretty much only in computer browers. Here's a screen shot of the problem, if that helps. I know it doesn't look centered, that's because I cropped it on the sides to reduce the image size. 

      problem.jpg

      Here's the only css I have for the menu bar:

      #menu {

                width: 100%;

                padding-bottom: 1em;

                }

       

      and the three div's together:

      #sidebar1, #maintxt, #sidebar2 {

                float: left;

                border-color: #303;

                border-style: solid;

                border-width:  .15em;

      }

      Thank you!

        • 1. Re: Clearing Spry float without clearing all float
          Nancy O. MVP

          We need to see all your code.   Got a link we could look at?

           

          Nancy O.

          • 2. Re: Clearing Spry float without clearing all float
            roselaw2702 Community Member

            I don't have the page live yet, so here's the html and css. I know it's not the prettiest, but this is one of the first websites I've done and it's organized in a way that makes sense to me.

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <link href="../Css/one1.css" rel="stylesheet" type="text/css" />

            <style type="text/css">

            body {

                      background-image: url(../Images/Pink-purple%20grain.jpg);

            }

            </style>

            <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

            <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

            </head>

             

             

            <title>Sara L. Rose, LLC</title>

             

             

            <body>

            <div id="main">

              <div id="h1"><a href="one1.html"><img src="../Images/Logo.jpg" width="297" height="90" alt="Sara L. Rose, LLC" /></a></div>

              <div id="menu">

                <ul id="MenuBar1" class="MenuBarHorizontal">

                  <li><a href="one1.html" class="MenuBarItemSubmenu">Home</a>

                    <ul>

                      <li><a href="one1.html">Home</a></li>

                      <li><a href="intro.html">Introduction</a></li>

                    </ul>

                  </li>

                  <li><a href="About.html" class="MenuBarItemSubmenu">About</a>

                    <ul>

            <li><a href="About.html">Our Firm</a></li>

            <li><a href="Testimonials.html">Testimonials</a></li>

                    </ul>

                  </li>

                  <li><a class="MenuBarItemSubmenu" href="services.html">Services</a>

                    <ul>

                      <li><a href="legal services.html">Legal Services</a></li>

                      <li><a href="#" class="MenuBarItemSubmenu">Handbook</a>

                        <ul>

            <li><a href="#">Information</a></li>

            <li><a href="../Handbook.pdf">DIY Order Form</a></li>

                        </ul>

                      </li>

                      <li><a class="MenuBarItemSubmenu" href="#">Newsletter</a>

                        <ul>

            <li><a href="#">Excerpts</a></li>

            <li><a href="#">Order Form</a></li>

                        </ul>

                      </li>

                    </ul>

                  </li>

                  <li><a href="#">Resources</a></li>

                </ul>

              </div>

              <div id="sidebar1">

                <h2>Are you prepared?</h2>

                <p>Litigation happens. Despite your best intentions, it will probably happen to you. Are you 100% sure that you are properly pregared? Just a little legal work can significantly reduce the risk to your business. Protect your interests today.</p>

                <hr />

                <h2>We can help you minimize risk.</h2>

                <p>Sound human resource policies, together with proper documentation, can significantly reduce your legal risk and can help head off problems before they begin. Clients benifit from our free quarterly newsletter and critical legal updates. Call us to find out how we can help your business with expertley prepared employee handbooks, employment contracts, employment applications, severance agreements, and non-complete/non-disclosure agreements. </p>

              </div>

              <div id="maintxt">

            <h2>What you don't know can hurt you.</h2>

                <p>You must comply with ever-changing employment laws, whether you know about them or not. We focus on educating our clients before problems arise, and not just responding to crises as they occur.</p>

                <h3>For example, you may not know:</h3>

                <ul>

                  <li>Salaried employees may be entitled to overtime pay.</li>

                  <li>Some questions are illegal to ask during a job interview, or on a job application.</li>

                  <li>Properly drafted employment policies can be used to defeat employment law workers' compensation claims, and unemployment claims.</li>

                  <li>You generally may not take deductions from payroll checks without your employees' written permission - even if they owe you money.</li>

                  <li>You may be able to significantly reduce the amount of time an employee has to file suit against you.</li>

                  <li>Your e-mail policy (or lack thereof) could result in a sexual harassment or discrimination claim being filed against you.</li>

                  <li>Supervisors, managers, and human resource professionals may be sued personally for alleged violations of the FMLA and state anti-discrimination statutes.</li>

                </ul>

              </div>

              <div id="sidebar2">

                <h1 align="center"><u>Contact Us:</u></h1>

                <h2 align="center"><strong>By Phone</strong></h2>

                <p align="center">614-834-1200</p>

                <p align="center"> </p>

                <h2 align="center"> <strong>By Fax</strong></h2>

                <p align="center">614-834-1274</p>

                <p align="center"> </p>

                <h2 align="center"> <strong>By Mail</strong></h2>

                <p align="center">PO Box 188</p>

                <p align="center">Pickerington, Ohio 43147 </p>

                <p align="center"> </p>

                <h2 align="center"><strong>By E-mail</strong></h2>

                <p align="center"><a href="mailto:sara.rose@slroselaw.com">sara.rose@slroselaw.com</a></p>

                <p align="center"><a href="mailto:paralegal@slroselaw.com">paralegal@slroselaw.com</a></p>

              </div>

              <div id="f1">

                <p>Sara L. Rose, LLC</p>

                <p>Home <img src="../Images/bluedot.jpg" width="15" height="15" alt="space" /> About <img src="../Images/bluedot.jpg" width="15" height="15" alt="space" /> Site Map <img src="../Images/bluedot.jpg" width="15" height="15" alt="space" /> Privacy &amp; Disclaimer</p>

              </div>

            </div>

            <script type="text/javascript">

            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

            </script>

            </body>

            </html>

             

             

             

             

             

             

            @charset "utf-8";

            /* CSS Document */

            /*base text/size=16px*/

             

             

            /*entire page*/

            #main {

                      padding-left: .3125em; /* 5px / 16px = .3125*/

                      padding-right: .3125em;

                      max-width: 100%;

                      width: 8.5in;

                      background-attachment: fixed;

                      background-image: url(../Images/Pink-purple%20grain.jpg);

                      background-repeat: repeat;

                      position: relative;

                      margin: auto;

                      overflow: hidden;

                      padding-bottom: 6em;

            }

             

             

             

             

            /*header and footer*/

            #h1, {

                      width: 90%; /* 700px / 988px = 0.7085 */

                      padding: .3125em; /* 5px / 16px = .3125*/

                      margin-bottom: 1em;

            }

             

             

            /*menu bar*/

            #menu {

                      width: 100%;

                      padding-bottom: 1em;

                      }

             

            /*main text blocks*/

            #sidebar1, #maintxt, #sidebar2 {

                      float: left;

                      border-color: #303;

                      border-style: solid;

                      border-width:  .15em;

            }

             

             

            /*are you prepared*/

            #sidebar1 {

                      padding: .3125em; /* 5px / 16px = .3125*/

                      min-width: 200px;

                      width: 25%;

                      max-width: 100%;

                      margin:  em;

                      margin-top: 1em;

                      height: auto;

            }

            #sidebar1 h2 {

                      font-size: 1.5em;

            }

             

             

             

             

            /*what you don't know*/

            #maintxt {

                      min-width: 250px;

                      width: 41%;

                      padding: .3125em; /* 5px / 16px = .3125*/

                      margin: 1em;

                      background:#FFF;

            }

             

             

            #mtext h2{

                      font-size: 1.5em;

            }

            #mtext p {

                      font-size: 1em;

                      margin: 0;

                      line-height: 1.4em;

            }

             

             

             

            /*contact us*/

            #sidebar2 {

                      padding: .3125em; /* 5px / 16px = .3125*/

                      min-width: 200px;

                      width: 20%;

                      margin: 1em;

                      text-align: center;

                      margin-bottom: 6em;

            }

            #sidebar2 h1 {

                      font-size: 1.5em;

                      text-decoration: underline;

            }

            #sidebar2 h2 {

                      font-size: 1.25em;

                      margin-bottom: 0;

                      margin-top: .5em;

            }

            #sidebar2 p {

                      margin: 0;

                      font-size: 1 em;

                      line-height: 1.4em;

            }

             

             

             

             

            /*footer*/

            #f1 {

                      width: 100%;

                      position: fixed;

                      left: 0;

                      bottom: 0;

                      text-align: center;

                      width: 99%;

                      padding-right: .2em; /* 20px / 16px* = 1.25*/

                      margin-top: -.5em;

                      margin-bottom: -.5em;

                      background-image: url(../Images/Pink-purple%20grain.jpg);

                      border-top-color: #303;

                      border-right-style: none;

                      border-left-style: none;

                      border-top-style: solid;

                      border-bottom-style: none;

                      border-top-width:  .15em;

                      }

             

            /*extras*/

            <a href="tel:+1-614-834-1200">Click to Call: +1 (614) 834-1200</a>

            <a href="tel:16148341200">16148341200</a> /* makes phone number clickable*/

            <a href="mailto:paralegal@slroselaw.com">paralegal@slroselaw.com </a> /*makes e-mail clickable*/

            • 3. Re: Clearing Spry float without clearing all float
              roselaw2702 Community Member

              I actually just fixed it - I changed the width of the container div that held the spry menu bar to the same width as my page

              #menu {

                   width: 8.5in;

                   max-width: 100%;

              }

              something that I was doing to fiddle with the appearance of the menu bar, and it dropped the other div's down. It may not be the most effective, and there may be a prettier way to do it but it works! Figured I'd also post the exact answer I used for anyone who stubles across this, as I couldn't find an answer anywhere else. Thank you though!