CSS and Stack Overflow

2 min read

\"wpid-6a0120a85dcdae970b012877705432970c-pi.jpg\"

 

My friend Piper put me on the correct path for my footer with the following code:

footer div {

width: 32%;

background: rgba(113,15,154,0.73);

border: 1px solid rgba(255,255,255,0.00);

display: inline-block;

vertical-align: top;

overflow-x: none;

}

footer div p {

max-width: 100%;

margin-left: 0;

padding: 0;

}

But that left me with some janky (my new favorite word, apparently) formatting that I could not get rid of by myself. Stack Overflow to the rescue!

So. I got four answers and tried three before I tried this:

footer {

background: rgba(113,15,154,0.73);

}

footer div {

width: 32%;

border: 1px solid rgba(255,255,255,0.00);

display: inline-block;

vertical-align: top;

text-align: center;

}

footer div section {

max-width: 100%;

margin: auto;

padding: 20px;

text-align: center;

}

And boom. Fixed…but not quite.

There was an issue with the Font Awesome icons that I still can’t get right– the dribble icon was floating right of the footer. I decided to put the icons in a div id container and style it. That has worked– the icons are all at the bottom but no matter what I do, I can’t get them to float left.

Here is the HTML:

 <div id="container"> 
 <a href="https://www.behance.net/twhite412photo"><i class="fa fa-behance-square fa-2x"></i></a>
 <a href="https://www.linkedin.com/in/tiffanyrwhite/"><i class="fa fa-linkedin-square fa-2x"></i></a>
 <a href="https://twitter.com/TiffanyW_412"><i class="fa fa-twitter-square fa-2x"></i></a>
 <a href="https://github.com/twhite96"><i class="fa fa-github fa-2x"></i></a> 
 <a href="https://plus.google.com/+TiffanyWhiteWriter"><i class="fa fa-google-plus-square fa-2x"></i></a>
 </div>

And the CSS:

footer div container{
 float: left;
}

Sigh. It is almost 2 am in Pittsburgh and I have been messing with this for the past two days. It isn’t where I want it, regardless of the hinky CSS. I need JavaScript and JQuery to make it not just a static page. Maybe some CSS animations. Don’t know. Yesterday I thought, “this will be up in running in three months, tops, regardless of if I’m ready to freelance”. Today I’m back down to earth.

CC BY-SA 4.0 CSS and Stack Overflow by Tiffany White is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.