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

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

htmlangulartypescript

AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck. Here's the HTML snippet: <div class="navbar-collap ...

htmlcsswordpressfirefoxtwitter-bootstrap-3

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Retrieve the checkbox value and assign it to an object in the $scope of an Angular

As a newcomer to angularjs, I've been struggling with this code snippet for the past two days. My goal is to retrieve values from selected checkboxes within my angular js controller. I have experimented with both ng-true-value and ng-false-value, bu ...

htmlasp.netangularjscheckboxangularjs-scope

How can I implement horizontal scrolling on a material-ui table containing numerous columns?

As I work with the React Material-UI framework, I am using this table example as a guide. However, I am facing an issue where my table becomes overcrowded when I have numerous columns, causing the content to be cut off. I recently came across the material ...

cssreactjsmaterial-designmaterial-ui

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

Having trouble using the `.not` function in jQuery

I'm working on implementing a collapsible menu using jQuery. When any header is clicked, the next sibling (the box) should expand while all other boxes collapse. HTML <div class="finbox" id="finbox1"> <div class="finheader" id="finheade ...

javascriptjqueryhtml

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

Tips on creating a transition in React to showcase fresh HTML content depending on the recent state changes

I am completely new to React and recently completed a project called Random Quote Machine. The main objective was to have a method triggered inside React when the user clicks a button, changing the state value and re-rendering to display a new quote on the ...

javascripthtmlreactjs

What could be causing the absence of ReactDOM in my hello world application?

I have recently started learning Reactjs and I'm attempting to run a hello world program in the browser. However, I encountered an error which reads: react-dom.min.js:12 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_ ...

javascripthtmlreactjs

Unable to display ChartJs within the same DIV on the webpage

I'm struggling to display the Pie Chart from ChartJs in the correct DIV when I click from the left DIV. Running the chart directly works fine, but I want them both on the same page in separate DIVs. I have separate HTML files for each link and they wo ...

javascriptjqueryhtmlcsschart.js

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

javascripthtml

What is the reason behind the CSS not rendering when async:false is used?

I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior: $('.edit-config').click(function() { var that = this; var msg; ip ...

javascriptjquerycssajaxasynchronous

Height of the Accordion List

I have a code snippet below for an accordion list that I put together. I initially set the height for all the heading boxes to be uniform, but it seems like box A is displaying larger than the others. Can you help me figure out what went wrong? Any suggest ...

javascripthtmlcssaccordion

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

What is the most effective method for integrating a hosted React application into a website that is not built using React?

I currently have a complete React application hosted on AWS that I want to embed into another non-React site. Right now, I have it embedded using an iframe and it's working well. <!doctype html> <html lang="en> <head> <meta c ...

htmlreactjs

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs