What is the best way to eliminate the unwanted white space below the footer on a webpage

I'm working on a website and I've noticed that at the end of the footer, there is a large block of white space that shouldn't be there. I've tried adjusting the HTML and CSS code, but nothing seems to fix the issue. Strangely, other pages on the site with the same footer code don't have this problem.

I suspect it might not be a CSS problem since other pages are working fine. Perhaps it's an error in how I'm closing my divs. Hopefully, another set of eyes can spot the mistake. Thank you!


<footer id="site-footer">
    <section>
        <div class="container">
            <div class="row">
               <div class="clearfix">


                <div class="hidden-phone">
                    <div class="span3 widget text-3 widget_text">
                        <div class="widget-inner">          
                            <div class="textwidget">
                                <div style="text-align:center;">

                                    <img src="images/2014/10/logo.png">
                                    <h3>Apparel</h3>
                                    <hr>
                                    <p>Meet LA Apparel, a beautiful boutique with remarkable details.</p>
                                </div>
                            </div>
                         </div>
                       </div>
                    </div>




                    <h1>------------Collections Go here----------</h1>          




                    <div class="span12 social-icons clearfix">
                        <hr>
                        <h4><small>CONNECT WITH US:</small></h4>

                        <a target="_blank" href="http://www.facebook.com" class="tip" data-toggle="tooltip" data-html="true" data-placement="bottom" title="Find us on Facebook"><i class="icon-facebook"></i></a>
                        <a target="_blank" href="http://www.twitter.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on Twitter"><i class="icon-twitter"></i></a>
                        <a target="_blank" href="http://www.linkedin.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on LinkedIn"><i class="icon-linkedin"></i></a>
                        <a target="_blank" href="http://www.pinterest.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on Pinterest"><i class="icon-pinterest"></i></a>

                   </div>
                </div>
               </div>
            </div>
         <HR>
            <div class="span12 clearfix">
                <p class="pull-left">&copy;LA Apparel</p>
            </div>
        </footer>
    </section>   
</body>
</html>



#site-footer {
  background-color: #ecf0f1;
  padding: 40px 0 15px;
  position: relative;
}
#site-footer a {
  color: #2980b9;
}
#site-footer a:hover {
  color: #ae9e90;
}
#site-footer #category-accordion > li a.accordion-collapser {
  font-size: 14px;
  font-weight: 300;
}
#site-footer #category-accordion > li > ul > li > a {
  font-size: 13px;
  padding: 1px 6px;
}
#site-footer #category-accordion > li > ul > li:last-child > a {
  padding-bottom: 10px;
}
#site-footer h4 {
  margin-top: 0px;
}
#site-footer .social-icons a {
  padding: 5px;
}
#site-footer p {
  font-size: 14px;
  line-height: 20px;
}
#site-footer hr {
  border-color: #F3F3F3 -moz-use-text-color #E3E3E3;
  border-top: 1px solid #333;
  border-bottom: 1px solid #212625;
}
#site-footer .blog-posts article {
  border-bottom: 1px solid #E3E3E3;
  padding: 10px 0 0;
}
#site-footer .blog-posts article:first-child {
  padding-top: 0px;
}
#site-footer .blog-posts article:last-child {
  border-bottom: none;
}

Answer №1

No CSS code provided, but feel free to experiment with

<span class="float-right">&copy;NY Clothing</span>

Instead of

<div class="float-right">&copy;NY Clothing</div>

Since the p tag has a margin of 16px on top and bottom. Alternatively, you can reset the css for the p tag's margin.

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

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Trying to write a simple piece of HTML code that finds the number greater than or equal to the first initial amount that wholly divides the second given amount. The code attempts to divide the numbers, and if it fails, increments the first number by 1 and ...

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance? Appreciate your assistance in advance. <head>     <title>Test</title>     <meta http-equiv="content-type" content="tex ...

Reload a forum in a div without refreshing the entire page

I'm interested in finding out if it's possible for a div to reload similar to how a window does. I have a forum set up, but I don't want the entire page to reload after each form submission. Instead, I'm wondering if only the elements w ...

Showcase JSON data within a designated div

As someone new to HTML, JavaScript and Vue, I'm unsure if my issue is specific to Vue or can be resolved with some JavaScript magic. I have a Node.js based service with a UI built in Vue.js. The page content is generated from a markdown editor which ...

Illuminate the expanded dropdown menu in a Bootstrap 5 navbar

Bootstrap 5 navbar allows for the creation of dropdown menus. Is there a way to highlight the current menu item when a dropdown is opened, similar to how it's done in Windows desktop applications? This feature is not provided by Bootstrap 5: How can ...

Instead of displaying an error page, an Axios post request is returning data

I'm currently dealing with a post request that looks like this: axios({ method: "post", url: "/sessions/add", data: { session: { name: session.session.name, date: sessionDateInput.value, ...

The concept of AJAX send function and toggling button visibility

I am facing a challenge with a textarea and send button on a panel that is displayed after entering the first character. The visibility of the button is controlled by the isButtonVisible() method. Once clicked, it sends the text from the textarea using the ...

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

Detecting the specific button that was selected with PHP

I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...

Troubleshooting: AngularJS routing issue

I'm facing an issue with my AngularJS routing code. Here is the code snippet: /// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" /& ...

The absence of color attribute in CSS serves as a safeguard against overriding

Issue Update: Upon pushing the application to the development server, ASP includes injected styles that are overriding the necessary custom styles. One specific example is a wrapper div with an 'a' tag that overrides all styled 'a' tags ...

The constant reloading of the page is hindering the crucial display of the data

After successfully getting something to work, I noticed that the data disappears when the page refreshes. How can I prevent this from happening? <html> <head> <meta charset="utf-8"> <title> IT Services </ti ...

jQuery Hide function malfunctions when the contents of divs are sorted

I stumbled upon some jQuery code that can arrange divs either numerically or alphabetically based on their content. To enhance this functionality, I included a feature to hide a div by clicking on it. While sorting the divs and hiding them individually wor ...

Newbie Query: How can I apply various font weights to a single font within the same stylesheet?

Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700. I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font we ...

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

Using PHP script, extract information from a JSON file and populate a dropdown menu in HTML

I am attempting to extract data from a JSON file using PHP and then display this data in an HTML select tag on the front end. Below is my PHP file: <?php ini_set('display-errors', 'on'); error_reporting(E_ALL); $executionStartTim ...

Using jQuery and CSS to Filter and Sort Content

I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously. Currently ...