Footer Ignores Floating Content

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

  •  12-07-2023
  •  | 
  •  

题

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.

有帮助吗？

解决方案 3

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

其他提示

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.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top