CSS and Stack Overflow | Tiffany R. White Blog

CSS and Stack Overflow

Reading time: 2 mins

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;

}




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;

}




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>



 <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;
}



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.

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter