Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page.

Any assistance would be greatly appreciated. I know it's probably something simple, but my brain is fried from working too long...

Below is the CSS for the footer section:

#footer{float:left; width:100%; margin-bottom:0px; border:0px solid #cccccc;  background: #333; border-top:0px solid #f0f0f0;
margin-top: 0px;
font-size: 13px;
line-height: 20px;
color: #BBB;
padding-top: 25px;
}

#footer-inner {
width: 966px;
margin: 0 auto;
}

#footer ul {
margin: 0;
padding: 1em 0 2em 0;
}

#footer ul li {
list-style-type: none !important;
list-style-image: none !important;
padding: 0;
margin: 0;
}

#footer a{
    color: #BBB;
    text-decoration: none;

}

#footer a:hover { 
    text-decoration: none;
    color: #fff;
    background-color: #f7ab31;
    }

#footer h2 {
color: white;
font-size: 22px;
}


#footerbottom {
width:966px;
padding-left: 10px;
    margin-top: 40px;
}





#footerbottom .copyright  {

    width: 400px;
    font-weight: normal;
    left: 0;
    color: #999;
    font-size: 11px;
    font-family: arial, helvetica, sans-serif;

}

#footerbottom a{

    color: #000;
    text-decoration: none;

}

#footerbottom a:hover { 
    text-decoration: none;
    color: #fff;
    background-color: #f7ab31;
    }

#footer .left_content{float:left; width:180px; margin-right: 40px;}

#footer p{float:left;  padding:30px 0 0; 
line-height: 18px;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    font-size:12px;
    color:#000;
}

#footer .left_content2{float:left; width:180px; padding-left:0px; margin-right: 40px;}

#footer .left_content3{float:left; width:180px; padding-left:0px;}



#footer .right_content{float:right; width:200px; padding:25px 10px 0 0;}
#footer .right_content img.british_logo{float:right;}
#footer .right_content ul{float:right; width:85px; list-style:none;}
#footer .right_content li{float:left; width:auto; padding-right:5px;}
#footer .right_content li.last{padding-right:0;}
#footer .block-system{display:none}

Appreciate any help!

htmlcss

Answer №1

To improve the layout, consider adding overflow: hidden to the CSS of #footer.

Additional Note: I personally believe that the use of float is often excessive and can lead to problems. For instance, setting float: left; width: 100%; seems unnecessary in most cases. My approach to CSS is minimalist - I only apply styles when necessary and avoid using rules I don't fully grasp. This makes troubleshooting styling issues much simpler.

On a side note, have you seen how Internet Explorer displays the page? It appears to be ignoring the stylesheets completely, resulting in a poor visual experience.

Answer №2

Within the structure div#footer-inner>div.copyright>div#block-block-81, there is a specific class assigned as "clear-block".

The issue lies in the following code snippet:

.clearblock:after{
content:".";
}

The culprit was adding a period after the copyright notice, causing the floats to be cleared and pushing it below the footer.

It's possible that this simple addition was creating a cascade effect due to the complexity of your layout. However, removing just that content addition resolved the problem.

Answer №3

Consider removing the height: 0; property from .clear-block:after{}. Doing this could potentially resolve the issue at hand.

Answer №4

There is a 30 pixel top padding on #footer p.

I would specify it more, but there are approximately 43 external style-sheets being used on that particular page.

UPDATE:

Upon further clarification from the original poster, it turns out that it's not actually padding. It is 18 pixels of white space at the very bottom below the footer.

I concur with Syntax Error's assessment that the main issue appears to be a "period" . getting pushed under the footer due to the class .clearblock:after.

Answer №5

Perhaps the solution lies within your wrapper

Upon inspecting the page source, it appears that your footer is not contained within the wrapper as indicated in the HTML code. By right-clicking in Chrome to view the elements inside the wrapper, you can properly close it and potentially resolve the issue.

<!-- wrapper starts ->
<div id="wrapper">....</div>  <--- here is where the wrapper ends
<div id="footer"> ....</div>  <---- it should end here instead
<!-- wrapper ends ->

The corrected structure should be like this:

<!-- wrapper starts ->
    <div id="wrapper">....
      <div id="footer"> ....</div>
    </div>
    <!-- wrapper ends ->

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

Creating a custom button in PHP

Currently, I am in the process of developing a shopping cart feature. One key requirement is to send both the product ID and the desired quantity chosen by the user to another file named cart.php. Below is an excerpt from my code snippet: for($i=0;$i< ...

phphtmlmysqlformsform-submit

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

htmlcsstagsdocument-body

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Problem: Challenge in Iterating and Assigning Variables to HTML Table Elements

I am currently working on a project that involves tracking the order statuses of individual shipments from a list of URLs stored in an Excel sheet. The code I have written is capable of looping through the URLs and extracting information from them successf ...

htmlexcelfor-loopvba

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. After removing the background-size: cover; in the home section, it appears like this: .videoContainer {} .videoContainer .over ...

htmlcss

Tips for sending parameters to a web service URL through a Phonegap HTML page

In my Phone Gap application, I have an HTML page where I need to pass the values like name, contact, etc. to a Webservice URL. However, I am unsure of where to write the code and how to call the webservice URL. Here is a snippet of my HTML code: <div ...

jqueryhtmlajaxweb-servicescordova

Extract the content from the span element on Whatsapp Web

Currently, I am in the process of learning Python along with Selenium and have encountered a challenge. I am attempting to extract the username from the most recent message in a WhatsApp group conversation. Despite several attempts, I have been unsuccessfu ...

pythonhtmlcssseleniumselenium-webdriver

Struggling with generating forms using AJAX, Javascript, and HTML depending on the selection made from a drop-down menu

I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquis ...

javascriptjqueryhtmlcssajax

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

csstypescriptangularcomponentsrelative-path

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float

Display XML information when a row in the table is selected

I am working with an XML data sheet and utilizing ajax to extract information from it in order to generate specific tabs and construct a table of data. However, I am encountering a challenge when attempting to display details in adjacent divs once a row of ...

jqueryhtmlajax

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...

css

Deciphering the elements in the periodic table using PHP and HTML

Recently, I encountered a problem that got me thinking. I was given the task of posting people's bios online (as discussed in another question) and I chose to use XML to create elements for each section of the bio. However, when some bios contained ...

phphtml

When jQuery fails to detach() due to the presence of an input tag

I have a situation where I am trying to rearrange elements within a table. Everything works fine, until I introduce a tag, which triggers this error message:</p> <pre><code>Error: this.visualElement is undefined Source File: http://192. ...

javascriptjqueryhtmldom

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

htmlcsshtml-tablenested

Expanding jQuery menu that reveals a submenu if the current page is located within that specific submenu item

Currently, I am trying to enhance the functionality of this menu: http://jsfiddle.net/tz37m/1/ so that it works seamlessly across the entire website. My goal is to ensure that when a visitor is on a page within a submenu, that specific submenu remains open ...

jqueryhtml