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

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">


#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 */


<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 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>
            ◦ <a href="/pages/7">7</a><br>
            ◦ <a href="/pages/8">8</a><br>
            ◦ <a href="/pages/9">9</a><br>

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


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.

Something like:-

…is much simpler and works.


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

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