Alignment of 3-Column Footer

HTML & CSS
1

Hello! I’ve been trying to create a footer like this:

1435×179 19.6 KB

But it’s to be 3 columns and not 4.

However, I’ve been facing a few problems.

  1. Alignment of content

1379×485 18.7 KB

Each column is going under each other, instead of being side-by-side.

What should I do?

  1. Footer looks different on different pages of site

On my ‘About Us’ page (and the preferred one), my footer is aligned with the page’s container nicely.

1344×685 30.3 KB

Source: http://xojaynee.tictail.com/about-us

However, on my ‘Contact Us’ page, the footer is stretched across the entire length of the page. I’ve tried adjusting the width and all, but to no avail.

1440×797 31.8 KB

Source: http://xojaynee.tictail.com/contact-us

How should I adjust it to make it look like the one on the ‘About Us’ page?

  1. How do I add in the words ‘Email Address’ in the input field of the ‘Subscribe’ column, in the footer?

Here’s my CSS and HTML:

CSS:

#footer {
    position: relative;
	overflow: hidden;
}

.wrap {
	background: #3E3E3E;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

 #footer a,
 #footer h3 {
    font: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 26px;
 }

.clear {
    clear: both;
}

.left {
    text-align: left;
    float: left;
    width: 33%;
    padding: 20px;
}

.right {
    float: right;
    text-align: left;
    font: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 26px;
    width: 33%;
    padding: 20px;
}
    
.centered {
    text-align: left;
    width: 33%;
    float: left;
    padding: 20px;
}

.subscribe_button {
    min-width: 200px;
    margin: 0;
    padding: 14px 0;
    background-color: #2f2e2a;
    font: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 19px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;

    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

HTML:

<footer id="footer">

<div class="wrap">

<div class="left">
<h3><a href="http://xojaynee.tictail.com/about-us">About Us</a></h3>
<h3><a href="http://xojaynee.tictail.com/faq">FAQ</a></h3>
<h3><a href="http://xojaynee.tictail.com/contact-us">Contact Us</a></h3>
<h3><a href="http://xojaynee.tictail.com/about-us">Terms & Conditions</a></h3>
</div>

<div class="clear"></div>

<div class="right">
<h3>Be the first to get access to our new arrivals and exclusive promo codes.</h3>
<form action="//tictail.us13.list-manage.com/subscribe/post?u=a39ec65a4cc079bc2af73cd52&amp;id=d3b88dcefc" method="post" id="right" name="right" class="validate" target="_blank" novalidate>
<div><input type="text" name="b_a39ec65a4cc079bc2af73cd52_d3b88dcefc" tabindex="-1" value=""></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscribe_button">
</form>
</div>

<div class="clear"></div>

<div class="centered">
<h3><a href="http://xojaynee.tictail.com/track-order">Track Order</a></h3>
<h3><a href="http://xojaynee.tictail.com/how-to-shop">How To Shop</a></h3>
<h3><a href="http://xojaynee.tictail.com/size-guide">Size Guide</a></h3>
<h3><a href="http://xojaynee.tictail.com/delivery-information">Delivery Information</a></h3>
<h3><a href="http://xojaynee.tictail.com/return-exchange">Return & Exchange</a></h3>
</div>

</div>

</footer>

Will really appreciate all help as I’ve been struggling with it for a couple of days now. I’m very new to this so please make your suggestions as dummy-friendly as possible, thank you! :relaxed:

2

Hi!

  1. To fix your code making the four column I suggest (assuming “normal” view):
    The two outer blocks is floated as is but has 25% width. The middle block gets overflow to claim the space adjacent to the floats. The socilal block is placed before in the middle block and is 50% width of its container.

Code explaining:

<!DOCTYPE html*><html lang="en"><head><meta charset="utf-8">
<title>SP xojaynee: Four Footer Columns</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style media="screen">
.centered{background-color:tan}
.social{background-color:red}

/* mended css */
#footer {
    position: relative;
    overflow: hidden;
    text-align: left;
}
.wrap {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
    background: #3E3E3E;
  color: #fff;
    font:900 14px/26px 'Open Sans', sans-serif;
  text-transform: uppercase;
}
#footer h3 a,
#footer h3 p {
    margin: 0;
  color: #fff;
    text-decoration: none;
}
.left {
    float: left;
    width: 25%;
}
.right {
    float: right;
    width: 25%;
}
.centered {
    overflow: hidden; /* claim the left over width between these 25% floats */
}
.social {
    float: right;
    width: 50%; /* of the squished parent width */
}
input {
    font-size: 100%;
}
.subscribe_button {
    margin: 0;
    padding: 14px 0;
    min-width: 200px;
    color: #fff;
    background-color: #2f2e2a;
    font:900 14px/19px 'Open Sans', sans-serif;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
</style>
</head>
<body>

<footer id="footer">
    <div class="wrap">
        <div class="left">
            <h3><a href="http://xojaynee.tictail.com/about-us">About Us</a></h3>
            <h3><a href="http://xojaynee.tictail.com/faq">FAQ</a></h3>
            <h3><a href="http://xojaynee.tictail.com/contact-us">Contact Us</a></h3>
            <h3><a href="http://xojaynee.tictail.com/about-us">Terms & Conditions</a></h3>
        </div>
<!--<div class="clear"></div> REMOVED-->
        <div class="right">
            <h3>Be the first to get access to our new arrivals and exclusive promo codes.</h3>
            <form action="//tictail.us13.list-manage.com/subscribe/post?u=a39ec65a4cc079bc2af73cd52&amp;id=d3b88dcefc"
                method="post" id="right" name="right" class="validate" target="_blank" novalidate>
                <div>
                    <input type="text" name="b_a39ec65a4cc079bc2af73cd52_d3b88dcefc" tabindex="-1" value="">
                </div>
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscribe_button">
            </form>
        </div>
<!--<div class="clear"></div> REMOVED-->
        <div class="centered">
            <h3 class="social"><p>Get Social</p><!--ADDED--></h3>
            <h3><a href="http://xojaynee.tictail.com/track-order">Track Order</a></h3>
            <h3><a href="http://xojaynee.tictail.com/how-to-shop">How To Shop</a></h3>
            <h3><a href="http://xojaynee.tictail.com/size-guide">Size Guide</a></h3>
            <h3><a href="http://xojaynee.tictail.com/delivery-information">Delivery Information</a></h3>
            <h3><a href="http://xojaynee.tictail.com/return-exchange">Return & Exchange</a></h3>
        </div>
    </div>
</footer>

</body></html>`
3 Likes
3
  1. I noticed you happen to place the container div’s closing tag before the footer on that page. The “About Us” page’s container includes the footer. :slight_smile:
2 Likes
4

Hi! Thanks so much for your help. Just tried it out and it works perfectly! However, I actually want the footer to have three columns and not four. How do I remove the ‘Get Social’ section? :slight_smile:

5

Hi!, Just remove that part and change the two floated blocks’ width to 33% again.

Sorry about the fourth column. :slight_smile:

2 Likes
6

Alright, solved! Thank you so much :relaxed:

1 Like
7

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