html5 中的 css 页脚问题

Question

这是页 footer 分的代码:

<footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src="img/notes.png" alt="img"></li>
                  <li>ARTICLES</li>
                  <li>BLOG</li>
                  <li>COLUMN</li>
                  <li>TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li>ABOUT</li>
                  <li>AUTHOURS</li>
                  <li>MASTHEAD</li>
                  <li>CONTRIBUTE</li>
                  <li>STYLEGUIDE</li>
                  <li>CONTACT</li>
                  <li>SPONSORSHIPS</li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="img/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here. ></a></p> 
               </div>
               <div class="footer-column2">
                  <img src="img/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title">Shopify Expert at $20 / hour</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

这是我的 JSfiddle:

http://jsfiddle.net/d0teo50p/7/

在我的页面页 footer 分，右侧内容显示不正确。

谁能帮我解决这个问题。

Answer 1

将 width:960px; 设置为 div.footer 并将 style="float:left;" 设置为 div.footer- column2 > p.footer-title 并将 width:110%; 移除为 p.footer-pgf。

尝试 - DEMO

HTML

<div class="wrapper">
         <header id="header">
            <img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
            <h1>The Articles</h1>
                 <nav class="header-nav">
                  <ul>
                      <li><a href="#">Articles</a></li>
                     <li><a href="#"><img src="img/icon.png" alt=""> &nbsp; Home</a></li>
                  </ul>
               </nav>
         </header>
         <section id="section">
            <article class="article">

                  <img src="http://s30.postimg.org/60fickvip/articles.jpg" alt="articles" />
                  <p class="comments">
                     by<span class="woo"> JOHN WOO</span> 
                     <date>June 04, 2013, 22 Comments</date>
                  </p>
                  <h1 class="issue">Issue No 376</h1>
                  <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
                  <p class="dev-express">asp.net, .net, dev-express</p>
                  <a href="#" class="myButton">More</a>

               <div class="border-bottom"></div>
               <div class="article1">
                  <img src="http://s30.postimg.org/anq5s389d/cat.png" alt="" />
                  <p class="comments">
                     by <span class="woo">JOHN WOO</span> 
                     <date>June 04, 2013, 22 Comments</date>
                  </p>
                  <h1 class="issue">Issue No 375</h1>
                  <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
                  <p class="dev-express">asp.net, .net, dev-express</p>
                  <a href="#" class="myButton">More</a>
               </div>

            </article>

            <aside class="aside">

               <img src="http://s30.postimg.org/hlpokah01/agencies.jpg" alt="agencies" />
               <h3>From the Blog</h3>
               <p class="windows">DAVID  <i> on </i>c# Windows</p>
               <p class="hex">How to convert System.Color to HTML color (hex)?</p>
               <p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
               <a  href="#" class="view">view answer</a>
            </aside>
          </section>
      </div>
         <footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src=".http://s30.postimg.org/rhqrjxmrx/notes.png" alt="img"></li>
                  <li>ARTICLES</li>
                  <li>BLOG</li>
                  <li>COLUMN</li>
                  <li>TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li>ABOUT</li>
                  <li>AUTHOURS</li>
                  <li>MASTHEAD</li>
                  <li>CONTRIBUTE</li>
                  <li>STYLEGUIDE</li>
                  <li>CONTACT</li>
                  <li>SPONSORSHIPS</li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="http://s30.postimg.org/ckiaix9jl/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here.</a></p> 
               </div>
               <div class="footer-column2">
                  <img src="http://s30.postimg.org/fm92svmoh/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title" style="float:left;">Shopify Expert at $20 / hour</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

CSS

* {
    box-sizing:border-box;
}

body {
    font-family:Raleway, sans-serif;
    text-decoration:none;
    line-height:1.42857143;
    margin:0;
}

html {
    position:relative;
    min-height:100%;
}

.wrapper {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}

#header {
    margin:10px;
}

#header nav {
    float:right;
    margin-top:15px;
}

#header nav li {
    display:inline-block;
}

#logo {
    padding-bottom:40px;
    border-bottom:solid 2px #CCC;
}

.view {
    color:#FF8C00;
}

.hr-style {
    background:url(http://s27.postimg.org/4sfiqgx7j/horizontal_lin

e.png) 50% 0 repeat-x;
    border:0;
    height:15px;
}

a {
    text-decoration:none;
    font-size:12px;
}

i {
    font-weight:100;
}

img {
    vertical-align:middle;
    border:0;
}

.header-nav ul li {
    display:inline;
    float:right;
    font-size:12px;
    padding:10px;
}

.header-nav ul li a {
    color:gray;
}

.comments,date {
    color:gray;
    font-size:12px;
    font-style:italic;
}

.woo {
    color:#FF8C00;
    font-style:normal;
    font-size:15px;
}

.lorem {
    color:gray;
    font-size:13px;
    line-height:25px;
    letter-spacing:.07pt;
    width:86%;
}

.border-bottom {
    border-bottom:1px solid gray;
    width:90%;
    padding-top:15px;
}

.dev-express {
    font-size:12px;
    font-family:Arial Narrow;
    color:gray;
    letter-spacing:1pt;
}

.article1 {
    margin-top:15px;
}

.myButton {
    background-color:#FF8C00;
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
    color:#fff;
    font-size:13px;
    text-decoration:none;
    padding:6px 18px;
}

.myButton:hover {
    background-color:#FF8C00;
}

.myButton:active {
    position:relative;
    top:1px;
}

#section {
    display:table;
}

.article {
    width:75%;
    padding-bottom:50px;
    display:table-cell;
    vertical-align:top;
}

.aside {
    display:table-cell;
    vertical-align:top;
    width:25%;
}

.issue {
    color:#FF8C00;
    font-size:25px;
    font-weight:400;
}

.windows {
    font-weight:600;
    font-size:12px;
}

.hex {
    font-weight:600;
    color:#FF8C00;
}

.sidebar-pgf {
    font-size:13px;
    line-height:23px;
    letter-spacing:.07pt;
}

nav {
    text-align:center;
}

.nav-list1 li {
    display:inline;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2pt;
    padding:15px;
}

.nav-list2 li {
    display:inline;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2pt;
    padding:15px;
}

.footer {
    background-image:url(http://s27.postimg.org/80k03ijhb/footer_bg.jpg);
    bottom:0;
    clear:both;
    height:auto;
    padding:15px;
    width:960px;
}

.footer-image {
    float:left;
    padding-right:13px;
}

.footer-title {
font-weight:700;
font-size:12px;
}

.footer-pgf {
    font-size:11px;
}

.footer-link {
font-size:11px;
    font-weight:600;
}

.copyright {
    font-size:12px;
    font-weight:500;
    text-align:center;
}

.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

.column4-pgf {
    font-size:11px;
}

.well {
    background-color:#f5f5f5;
    border:#e3e3e3 solid 1px;
    border-radius:4px;
    box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
    margin-bottom:20px;
    min-height:20px;
    padding:19px;
}

.footer-column2 {
    margin-left:45px!important;
}

section.footerWidth {
    width:960px;
    margin:0 auto;
}

#header h1,.footer-column1,.footer-column2 {
    float:left;
}

@media min-width992px{
.column-1,.column-2,.column-3,.column-4,.footer-column1,.footer-column2 {
    min-height:1px;
    padding-left:15px;
    padding-right:15px;
    position:relative;
}
}

@media min-width 992px{
.footer-column1,.footer-column2 {
    width:45%;
    margin-left:15px;
}
}

图片: