Search code examples
csscss-floatoverflowfooter

Footer menu goes top of main container

I have three main divs , they are header,main-container and footer. CSS for the divs are

#main_container
{
    width:950px;
    margin:0 auto;

}
#header
{
    background:#f4f8f9;
}
#footer
{
    clear:both;
    background:#355e95;
    height:40px;
    color:#fff; 
    font-size:13px;
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
}

Now, in the index page, there were no left -right floating so the footer is in bottom. But in the subsequent pages, there are lots of floating, now the footer goes above main-container ! Why this happens? I have cleared floating before footer div

<div class="clr"></div> 
    <div id="footer">
         &copy;2010 Sri Sai Group
         <div class="fbtm">
            Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
         </div>
    </div>

NB when I add overflow:auto; page is coming like this ! edited css page

FULL HTML FOR ONE OF MY PAGE:

<body>
    <div id="header">
        <div class="htop">
            <div class="phn">Ph +0361-26699811</div>

            <div class="email">Email [email protected]</div>

        </div>


    </div>

    <div id="main_container">
        <div id="menu_wrapper">
            <div class="menu_outer">

                <div class="logo">
                    <img src="css/images/logo.png" alt="Sri sai" />
                </div>

                <div class="menu">
                    <div id="site_title">
                        <h1>SRI SAI GROUP</h1>
                    </div>

                    <div id='cssmenu'>
                        <ul>
                           <li><a href='#'><span>Home</span></a></li>
                           <li class='has-sub '><a href='#'><span>About</span></a>
                              <ul>
                                 <li class='has-sub '><a href='#'><span>Overview</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Board Members</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Our Family</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Gratitude</span></a>

                                 </li>
                              </ul>
                           </li>
                           <li class='has-sub '><a href='#'><span>Business</span></a>
                                <ul>
                                    <li class='has-sub '><a href='#'><span>Food and Beverages</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Information Technology</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Consumer Servies</span></a>

                                 </li>
                                 </ul>   
                           </li>
                           <li><a href='#'><span>Contact</span></a></li>
                        </ul>
                     </div>
              </div>   
         </div>

         <div id="web-design">
      <img src="css/images/banner_ssg.png" />
    Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.

During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.

All our projects come with the needed documentation and support.
    </div>
        <div id="contact_form">

        <form method="post" id="customForm" action="">
            <div>
                <label for="name">Name&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input id="name" name="name" type="text" />
                <span id="nameInfo"></span>
            </div>
            <div>
                <label for="email">Phone&nbsp;&nbsp;&nbsp;</label>
                <input id="phone" name="phone" type="text" />
                <span id="phoneInfo"></span>
            </div>
            <div>
                <label for="message">Address&nbsp;</label>
                <textarea id="message" name="message" cols="" rows=""></textarea>
            </div>
            <div>
                <label for="email">Email&nbsp;&nbsp;&nbsp;</label>
                <input id="email" name="email" type="text" />
                <span id="emailInfo"></span>
            </div>
            <div>
                <label for="pass2">Website&nbsp;</label>
                <select>
                    <option>Static</option>
                    <option>Dynamic</option>
                </select>    
                <span id="pass2Info"></span>
            </div>

            <div>
                <input id="send" name="send" type="submit" value="Send" />
            </div>
        </form>
        </div>


    </div>


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>    


    </div>



    <div class="clr"></div> 
    <div id="footer">
         &copy;2010 Sri Sai Group
         <div class="fbtm">
            Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
         </div>
    </div>

    </body>
Solution

  • It looks like what you need to do is close your maincontent div before the footer, it is missing one there to do so (if you believe you already have it isn't).

                <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>
    </form>
    </div>
</div></div>



<div class="clr"></div> 
<div id="footer">
     &copy;2010 Sri Sai Group
     <div class="fbtm">
        Powered,Maintained and Designed By <a href="http://7sisters.in"
   target="_blank">7sisters.in</a>
     </div>

    Also, maybe look at making maincontent width a % to stop it from extending too far on some browsers.

    #main_container
{
width:100%;
margin:0 auto;

}