CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 722

Columns in footer

I'm trying to replicate the footer of this website as part of a school project. So far, I've figured out that my divs should be structured like this:

    <div class="wrapper">
        <div class="top-side">...</div>
        <div class="content">...</div>
        <div class="footer">
            <div class="footer-col">
                <h4>Column header</h4>
                <ul>
                    <li>list item1</li>
                    <li>list item2</li>
                </ul>                    
            </div>
        </div>
    </div>

And the css I've used is: 

.wrapper .footer {
    bottom:0;
    width:100%;
    margin: 5px;
    color: #FFFFFF;
    background-color: black;
}

.footer .footer-col {
    display: block;
    float: left;
    margin: 0 20px 0 0;
    width: 20%;
}

.footer .footer-col ul {
    list-style: none;
    display: inline;
    overflow: hidden;
}



.wrapper .footer .clear {
    clear: both;
}

This is my entire code so far. I can't figure out what more should be added to my css for this to work as it was desired meaning, left alignment of every element in each column and bold headers for each column. (I've solved this part with <h4>)

Any tips?

Upvotes: 0

Views: 61

Answers (1)

Nutshell
Nutshell

Reputation: 8537

If you want to replicate the same footer of the website you've said, I think a good way to do it is to replicate a similar HTML structure as well.

In that case, inspect the code with the browser inspector and you will se it's 5 groups of heading h4 + ul lists.

Here's a hint to do it in a JSFiddle I've made.

CSS

.container {overflow: hidden; background: #000; color: #fff; }
.footer-tab { float: left; width: 20%; font-family: Arial; }

ul { padding-left: 0; }
ul li { list-style: none; margin: 10px 0; font-size: 12px; }
ul li a { font-weight: bold;  }

I didn't make all the code but you can see, I think, a better structure to achieve it.

Upvotes: 1

Related Questions