Geek asks and answers

Why won't my footer appear in the correct area? Can I affect CSS?

On my christianselig.com website, my footer appears on all pages except the about.html page (http://christianselig.com/about.html), in which it appears at the top for some reason.

The page consists of two floating divs (one on the left, one on the right) with div wrapping both, and I understand that floats are probably the problem, but I have no idea what to do. Relevant CSS and HTML can be found below, and in addition, material available directly on the website is available.

HTML:

<div class="footer-wrapper">
            <div class="footer">
                <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

CSS

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding: 8px 0 5px 0;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        width: 900px; 
    }

        .copyright {
            float: left;
            margin: 0 0 5px 60px;
        }

        .footer ul {
            float: right;
            margin: 0 60px 5px 0;
        }

        .footer li {
            display: inline;
            padding-right: 12px;
        }

            .footer li:last-child {
                padding-right: 0;
            }

        .footer a {
            color: #808080;
            text-decoration: none;
        }

        .footer a:hover, .footer a:active {
            text-decoration: underline;
        }

Any help would be greatly appreciated!

+5
source share
2 answers

All you need to do is add the following, along with existing styles:

.lr-wrapper { overflow:hidden; }

+1

lr-wrapper. left-side right-side , .

clear , , , :

<div style="clear: both;"></div>

, css, clearfix, - :

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

: http://html5boilerplate.com/

+2

More articles:


All Articles