The bottom navigation menu is positioned at the top of the main container

I created three main divs, named header, main-container, and footer. Below is the CSS styling for these divs:

#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;
}

The issue arises when floating elements are introduced on subsequent pages, causing the footer to move above the main-container. Even after clearing the float before the footer div, this problem persists. See below:

<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>

Adding overflow:auto; seems to fix the layout issues.

Below is the full HTML code snippet from one of my pages:

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

            <div class="email">Email <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72010702021d00063245011b01061700015c1b1c">[email protected]</a></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="">
             // form inputs go here...
        </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>
csscss-floatoverflowfooter

Answer №1

If you're having trouble with the layout of your webpage, try ensuring that your maincontent div is properly closed before the footer. You might be missing a closing tag in that area.

            <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>

To avoid display issues on various browsers, consider setting the width of maincontent as a percentage rather than a fixed value.

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

}

Answer №2

To ensure that your #main_container expands in height based on its child elements, make sure to include the overflow:auto property in its CSS. This will allow the #footer to be positioned directly after the #main_container, ensuring it appears at the end of all content.

#main_container
{
    width:950px;
    margin:0 auto;
    overflow: auto; /* remember to add this */
}

Answer №3

please arrange this layout.

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

            <div class="email">Email <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cefe9ececf3eee8dcabeff5efe8f9eeefb2f5f2">[email protected]</a></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 class="clr"></div> 
    </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to incorporating a rectangular image into a circular frame with CSS

I have a rectangular image with dimensions of 300px by 300px. To display this image within a circle, I have created the following CSS code: img { width: 300px; height: 300px; background-color: white; border-radius: 50%; border: 2px solid black; ...

htmlcss

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: https://i.sstatic.net/1jZmh.png The blue background represents an image, with grey text boxes overlaid on top (one of which in ...

htmlcsstwitter-bootstrap

Aligning text vertically within a textbox using CSS

Currently tackling a textbox with a background and wondering if there's a way to vertically center the text inside it. Note: Text is perfectly centered in Firefox, but in IE it appears too high for some reason. Have tried adjusting line-height, paddi ...

htmlcsstextbox

Creating a unique bullet style using CSS

I've got a collection of student links that take users to their profiles, and I want to replace the usual circular bullet points with smiley faces. Each picture is 14x14 pixels in size. How can I use CSS to achieve this effect for the bullets? ul { ...

htmlcss

What is the best way to incorporate a div below an image in Ubergallery?

I have integrated the jquery ubergallery into my website, and I am trying to add a new div below the main photos for additional content such as share buttons and comments. I tried using the code that worked with colorbox, but since ubergallery uses colorbo ...

phpjqueryhtmlcsscolorbox

Incorporating a technique for aligning text towards the right as the number of characters or digits expands

I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this: https://i.stack.imgur.com/35eoh.png Please note that it is located in the upper right corner. The p ...

htmlcsstextmove

CSS button pressed

I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS. Currently, I have a button within a link and I would lik ...

javascriptjqueryhtmlcss

Is it possible to dynamically adjust the background color of a parent Label element in React when a Radio Input is selected?

Utilizing React Semantic UI presents a challenge when attempting to change the background color of a parent label related to an input element, particularly with a hidden radio button. In this situation, it is important for the label to maintain its button- ...

javascriptcssreactjssemantic-uisemantic-ui-react

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

javascripthtmlcssbuttonhtml-table

Phase 2 "Loading" visual backdrop

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...

javascripthtmlcssjquery-cycle2

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

javascriptcss

What are some methods to manipulate the appearance of text with jquery?

I am having trouble with jQuery and it seems like it's not working properly. Can anyone help me locate the error? My aim is to create a "Read less" button that will show more content when clicked. However, when I click on "Read More", nothing happens. ...

javascripthtmljquerycssbootstrap-4

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...

javascripthtmlcssdomnodelist

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Trouble with line breaks in expandable rows of data grid causing clarity issues

Exploring the expandable rows feature of Clarity datagrid for the first time. I initially thought I could insert any HTML code within the collapsed view to show content. Using VMware's expandable datagrid: However, I am facing an issue where even wh ...

cssangularvmware-clarity

user1234: I'm interested in decreasing the amount of items shown on the screen when it's smaller

Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess ...

htmlcssbootstrap-5

Toggle visibility of a div element using only CSS and HTML on click

I have a programming idea that involves the following: * Clicking on Span 1 will reveal Span 2 and disable Span 1. * Clicking on Span 2 will reveal Span 1 and disable Span 2. Below are the codes I have written, but I am not sure if they are correct. Any a ...

htmlcss

Incorrect font display occurring exclusively on Windows Chrome

There seems to be an issue with the Google served Open Sans font on my website, specifically with Win Chrome where the font appears thick and ugly. However, when I tested it on Win FF and Safari, everything seemed fine. The font also displays correctly on ...

htmlcssgoogle-chrome

Gliding along a div and concealing it out of view, making it seem like it has disappeared

I attempted to slide down the ".preloader" div after a 2-second delay using JQUERY, but I couldn't get it to work as expected. I didn't want to use a toggle button for this effect. I also experimented with creating an animation using @keyframes, ...

javascripthtmljquerycss