I am currently working on the footer design, but I am facing an issue with aligning the 4 divs containing links in the center. While Dreamweaver shows them centralized, they appear decentralized when uploaded or tested on JSFIDDLE.
My ideal layout would look something like this, with each div centered within the footer:
Random information above the divs below (displayed at the center of the footer)
Product Company Etc... Contact
link link
link link
You can view a demo with the full code here: http://jsfiddle.net/NkFe9/3/
Below is some of the CSS for reference:
/*global footer settings*/
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(../img/index/footer/pixelpatterns.png);
background-repeat:repeat;
}
#insidefooter {
margin-top: 20px;
text-align: center;
}
/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;
}
#insidefooterone h5, #insidefootertwo h5, #insidefooterthree h5, #insidefooterfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;
}
#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}
#insidefooterone li, #insidefootertwo li, #insidefooterthree li, #insidefooterfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}
#disclaimer {
margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}
#disclaimer p {
text-align:center;
color: #C9C9C9;
}
Thank you for your assistance.