Broken 4 Colum Footer - I Need a Hero's Brief Help :)

HTML & CSS
1

This isn’t really displaying properly here and I can’t upload attachments, but anyways, I bet one of you guys can help fix my 4 column footer in a matter of seconds! Much appreciato, upvotes to any bro that can get this 4 column footer to work

The part that isn’t displaying properly probably isn’t the problem

<!DOCTYPE html*><html lang="en"><head><meta charset="utf-8">
<title>Four Column Footer</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style media="screen">

.left{background-color:white}
.centerleft{background-color:white}
.centerright{background-color:white}
.right{background-color:white}

/* 4 COLUMN FOOTER */
#footer {
    position: relative;
    overflow: hidden;
    text-align: left;
}
.wrap {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
    background: #eee;
}
.left {
    float: left;
    width: 25%;
}
.right {
    float: right;
    width: 25%;
}
.centerleft {
    overflow: hidden; /* claim left over width */
    width: 50%;
}
.centerright {
    float: right;
    width: 50%; /* *of the squished parent width */
}

</style>
</head>
<body>

<footer id="footer">
    <div class="wrap">
        <div class="left">
            ◦ <a href="pages/1">1</a><br>
            ◦ <a href="/pages/2">2</a><br>
            ◦ <a href="/pages/3">3</a><br>
        </div>
        
        <div class="centerleft">
        <div class="centerright">
            ◦ <a href="/pages/4">4</a><br>
            ◦ <a href="/pages/5">5</a><br>
            ◦ <a href="/pages/6">6</a><br>
        </div>
            ◦ <a href="/pages/7">7</a><br>
            ◦ <a href="/pages/8">8</a><br>
            ◦ <a href="/pages/9">9</a><br>
        </div>

        <div class="right">
            ◦ <a href="/collections/10">10</a><br>
            ◦ <a href="/collections/11">11</a><br>
            ◦ <a href="/collections/12">12</a><br>
        </div>
      
    </div>
</footer>

</body>
</html>
2

I think I would totally rethink the html and css. Probably go for just a single list for the html, then use css columns to break it into four.

3

Something like:-

…is much simpler and works.

3 Likes
4

wow that is amazing. I knew there must be some easy way to do it. Kudos

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.