Footer Ignores Floating Content

StackOverflow https://stackoverflow.com/questions/23379320

  •  12-07-2023
  •  | 
  •  

Question

I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code: http://jsfiddle.net/9A2gL/8/ Basically I have:

<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>

I do have floating divs but I used clearfix so clear: both;

Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.

Was it helpful?

Solution 3

The clearfix div should be added before the end div of container.

OTHER TIPS

Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
</head>

<body>
      <header></header>
      <footer></footer>
</body>
</html>

Sencond for your footer please apply clearfix class there after proper markup or just 

.Clear{
   clear:both;
}

You are good to go (y).

I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows

<div id="wrapper">
   <div id="container">
<!-- REMOVED body HTML tag-->
       <div id="content">...</div>
       <aside>
          <div class="advert">..</div>
          <div class="news">..</div>
       </aside>
    <!-- End Container -->
    </div>
    <div class="clearfix">..</div>
    <footer>..</footer>
<!--End Wrapper-->
</div>

enter image description here

edit

Add bottom margin to your aside.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top