How to centralize child DIVS containing UL?

StackOverflow https://stackoverflow.com/questions/23336898

  •  10-07-2023
  •  | 
  •  

Question

I am building a footer but I am having trouble getting the 4 divs which contain links to various pages to centralize. On dreamweaver it behaves correctly, but as soon as I upload it or test it on JSFIDDLE its decentralized.

Ideally I want it to look like this, with each of the divs 'centered' in the footer:

        Random information above the divs below (displayed center of footer)

                 Product      Company      Etc....        Contact

                 link         link

                 link         link

And so on.

I have a demo here which has the full code: http://jsfiddle.net/NkFe9/3/

Here is some of the CSS:

/*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

Was it helpful?

Solution

Try adding padding:0 to ul

#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
    list-style: none;
    text-align: left;
    margin-left: 0;
    color: #C9C9C9;
    padding:0
    }

DEMO

And dont judge the output based on dreamweaver Design view. Always prefer to check in browser.

You need to use margin:0 auto to make the div center aligned. margin:0 auto wont make any difference with float:left. So you need to eliminate float: left from the parent div.

And try adding a parent div to the ul links so that it is easy to align it. Updated Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top