How do I center these side-by-side divs?

In a previous thread, I talked about a footer that I was working on. I got the footer exactly the way I want it with the following code, but I’d like a better way of centering it.

Right now, I’m just using a big left percentage margin on the first div, and that of course gives different results depending on screen res. Is there a better way to center this?

CSS:


#prefooter {
    width: 100%;
    border-top: 2px solid #3D5900;
    border-bottom: 1px solid #3D5900;
    min-width: 810px;
    background-color: #FFFEF5;
    white-space: nowrap;
    padding: 10px 0;
    float: left;
    text-align: center;
    }
div#prefooter div:first-child {
    margin-left: 20%;
    }
div#prefooter div {
    float: left;
    margin: 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    min-width: 90px;
    }
div#prefooter div ul {
    margin: 0;
    padding: 0;
    }
div#prefooter div ul li:first-child {
    font-size: 90%;
    font-weight: bold;
    margin: 0 0 6px -1px;
    padding: 0;
    border-bottom: 0;
    }
div#prefooter div ul li {
    font: .75em sans-serif;
    border-bottom: 1px dotted #666;
    margin: 2px 0;
    padding: 0 0 2px 0;
    list-style-type: none;
    }
div#prefooter ul li a {
    text-decoration: none;
    }
div#prefooter ul li a:hover {
    text-decoration: underline;
    }

HTML:


<div id="prefooter">
<div id="foot-home">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">What's new</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div id="foot-offices">
<ul>
<li><a href="#">Offices</a></li>
<li><a href="#">Planning</a></li>
<li><a href="#">Environment</a></li>
<li><a href="#">Realty</a></li>
<li><a href="#">Livability</a></li>
</ul>
</div>
<div id="foot-subjects">
<ul>
<li><a href="#">Subjects</a></li>
<li><a href="#">Legislation</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Funding</a></li>
</ul>
</div>
<div id="foot-awards">
<ul>
<li><a href="#">Awards</a></li>
<li><a href="#">Planning</a></li>
<li><a href="#">Environment</a></li>
<li><a href="#">Realty</a></li>
</ul>
</div>
<div id="foot-contacts">
<ul>
<li><a href="#">Contacts</a></li>
<li><a href="#">Liaisons</a></li>
<li><a href="#">Division Offices</a></li>
<li><a href="#">Metropolitan Offices</a></li>
<li><a href="#">Federal Lands Offices</a></li>
</ul>
</div>
</div>

To start with if you use a class instead of an id you could use that class for all footer divs. secondly instead of giving the div a left margin use margin: 0 auto instead

Yeah I need to change those IDs to classes. When I started off, each column was going to look different, but the design evolved faster than the code did.

I tried using margin: 0 auto; on the containing div, but it gets ignored for some reason.

I have a question. Are you just trying to center the floating divs inside of the #prefooter, without the inside columns being equally spaced? If so, add a

<div class="wrapper"></div>

inside of #prefooter but around your other divs.

Then update your css to


#prefooter {
    width: 100%;
    border-top: 2px solid #3D5900;
    border-bottom: 1px solid #3D5900;
    min-width: 810px;
    background-color: #FFFEF5;
    white-space: nowrap;
    padding: 10px 0;
    float: left;
    text-align: center;
    }
    
div.wrapper {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

div#prefooter div.wrapper div {
    float: left;
    margin: 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    min-width: 90px;
    }
div#prefooter div ul {
    margin: 0;
    padding: 0;
    }
div#prefooter div ul li:first-child {
    font-size: 90%;
    font-weight: bold;
    margin: 0 0 6px -1px;
    padding: 0;
    border-bottom: 0;
    }
div#prefooter div ul li {
    font: .75em sans-serif;
    border-bottom: 1px dotted #666;
    margin: 2px 0;
    padding: 0 0 2px 0;
    list-style-type: none;
    }
div#prefooter ul li a {
    text-decoration: none;
    }
div#prefooter ul li a:hover {
    text-decoration: underline;
    } 

Because the columns are floated, you need to add overflow:hidden to contain the floated elements.

Yeah I’m just trying to get the columns centered within #prefooter so that the margin on the left side of the first div is the same as the margin on the right side of the last div.

Then the wrapper should work. Centering using margin: 0 auto; requires a fixed width block element.

The problem I’d getting with that is that now all four columns stack instead of being side-by-side.

Hmmm. Did you remember to add the wrapper div?


<div id="prefooter">
	<div class="wrapper">
		<div id="foot-home">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">What's new</a></li>
				<li><a href="#">Calendar</a></li>
				<li><a href="#">Training</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
		</div>
		<div id="foot-offices">
			<ul>
				<li><a href="#">Offices</a></li>
				<li><a href="#">Planning</a></li>
				<li><a href="#">Environment</a></li>
				<li><a href="#">Realty</a></li>
				<li><a href="#">Livability</a></li>
			</ul>
		</div>
		<div id="foot-subjects">
			<ul>
				<li><a href="#">Subjects</a></li>
				<li><a href="#">Legislation</a></li>
				<li><a href="#">Publications</a></li>
				<li><a href="#">Training</a></li>
				<li><a href="#">Funding</a></li>
			</ul>
		</div>
		<div id="foot-awards">
			<ul>
				<li><a href="#">Awards</a></li>
				<li><a href="#">Planning</a></li>
				<li><a href="#">Environment</a></li>
				<li><a href="#">Realty</a></li>
			</ul>
		</div>
		<div id="foot-contacts">
			<ul>
				<li><a href="#">Contacts</a></li>
				<li><a href="#">Liaisons</a></li>
				<li><a href="#">Division Offices</a></li>
				<li><a href="#">Metropolitan Offices</a></li>
				<li><a href="#">Federal Lands Offices</a></li>
			</ul>
		</div>
	<!-- div.wrapper --></div>
<!-- div#prefooter --></div>

I sure did! Cept I put it in the WRONG place! LOL

I changed it, but it’s still stacking.

I’m looking for this:

[ list1 ][ list2 ] [list3 ][ list4 ]

And getting this:

[ list1 ]
[ list2 ]
[ list3 ]
[ list4 ]

I’m running out of ideas. I’ve tried wrapping the columns divs in their own div, then using margin: 0 auto; on that, but the whole thing still left-justifies. Argh!

Hi,

You can’t center floats very easily so use display:inline-block instead.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#prefooter {
    width: 100%;
    border-top: 2px solid #3D5900;
    border-bottom: 1px solid #3D5900;
    min-width: 810px;
    background-color: #FFFEF5;
    white-space: nowrap;
    padding: 10px 0;
    float: left;
    text-align: center;
}

div#prefooter div {
    display:-moz-inline-box;/* older mozilla if needed*/
    display:inline-block;
    vertical-align:top;
    margin: 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    min-width: 90px;
}
* html div#prefooter div{display:inline}
*+html div#prefooter div{display:inline}
div#prefooter div ul {
    margin: 0;
    padding: 0;
}
div#prefooter div ul li:first-child {
    font-size: 90%;
    font-weight: bold;
    margin: 0 0 6px -1px;
    padding: 0;
    border-bottom: 0;
}
div#prefooter div ul li {
    font: .75em sans-serif;
    border-bottom: 1px dotted #666;
    margin: 2px 0;
    padding: 0 0 2px 0;
    list-style-type: none;
}
div#prefooter ul li a {
    text-decoration: none;
}
div#prefooter ul li a:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
<div id="prefooter">
    <div id="foot-home">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">What's new</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div>
    <div id="foot-offices">
        <ul>
            <li><a href="#">Offices</a></li>
            <li><a href="#">Planning</a></li>
            <li><a href="#">Environment</a></li>
            <li><a href="#">Realty</a></li>
            <li><a href="#">Livability</a></li>
        </ul>
    </div>
    <div id="foot-subjects">
        <ul>
            <li><a href="#">Subjects</a></li>
            <li><a href="#">Legislation</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Funding</a></li>
        </ul>
    </div>
    <div id="foot-awards">
        <ul>
            <li><a href="#">Awards</a></li>
            <li><a href="#">Planning</a></li>
            <li><a href="#">Environment</a></li>
            <li><a href="#">Realty</a></li>
        </ul>
    </div>
    <div id="foot-contacts">
        <ul>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">Liaisons</a></li>
            <li><a href="#">Division Offices</a></li>
            <li><a href="#">Metropolitan Offices</a></li>
            <li><a href="#">Federal Lands Offices</a></li>
        </ul>
    </div>
</div>
</body>
</html>

The div wrappers are redundant as you could apply styles to the ul instead and save on html.:slight_smile:

Hi Paul! :wave:

Unfortunately, I can’t use any “hacks” like * or + because our gatekeeper won’t approve them (all CSS has to validated 100% on W3C’s tool), so that severely limits my options.

I started off that way, but had endless problems since I couldn’t use the star hack. :frowning:

I’m thinking maybe this cannot be done given our draconian web policy.

The IE hacks are 100% valid and will pass validation with no problem. You can remove the -moz hack as that is for older mozilla which will be very few users comparatively.

As I said above you could use my old float method also but will need a couple of wrappers to do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#prefooter {
    width: 100%;
    border-top: 2px solid #3D5900;
    border-bottom: 1px solid #3D5900;
    min-width: 810px;
    background-color: #FFFEF5;
    white-space: nowrap;
    padding: 10px 0;
    float: left;
    text-align: center;
    overflow:hidden;
}
div#prefooter .wrap1 {
    float:right;
    position:relative;
    left:-50%;
}
div#prefooter .wrap2 {
    margin: 0;
    padding: 0;
    position:relative;
    left:50%;
    float:left;
}
div#prefooter div ul {
    margin: 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    min-width: 90px;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
}
div#prefooter div ul li:first-child {
    font-size: 90%;
    font-weight: bold;
    margin: 0 0 6px -1px;
    padding: 0;
    border-bottom: 0;
}
div#prefooter div ul li {
    font: .75em sans-serif;
    border-bottom: 1px dotted #666;
    margin: 2px 0;
    padding: 0 0 2px 0;
    list-style-type: none;
}
div#prefooter ul li a {
    text-decoration: none;
}
div#prefooter ul li a:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
<div id="prefooter">
    <div class="wrap1">
        <div class="wrap2">
            <ul id="foot-home">
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">What's new</a></li>
                <li><a href="#">Calendar</a></li>
                <li><a href="#">Training</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
            <ul id="foot-offices">
                <li><a href="#">Offices</a></li>
                <li><a href="#">Planning</a></li>
                <li><a href="#">Environment</a></li>
                <li><a href="#">Realty</a></li>
                <li><a href="#">Livability</a></li>
            </ul>
            <ul id="foot-subjects">
                <li><a href="#">Subjects</a></li>
                <li><a href="#">Legislation</a></li>
                <li><a href="#">Publications</a></li>
                <li><a href="#">Training</a></li>
                <li><a href="#">Funding</a></li>
            </ul>
            <ul id="foot-awards">
                <li><a href="#">Awards</a></li>
                <li><a href="#">Planning</a></li>
                <li><a href="#">Environment</a></li>
                <li><a href="#">Realty</a></li>
            </ul>
            <ul id="foot-contacts">
                <li><a href="#">Contacts</a></li>
                <li><a href="#">Liaisons</a></li>
                <li><a href="#">Division Offices</a></li>
                <li><a href="#">Metropolitan Offices</a></li>
                <li><a href="#">Federal Lands Offices</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>


That is 100% valid also.:slight_smile:

Ok, see now you are just trying to make me look bad, LOL!

That works wonderfully, and is less code than my old way despite the divs.

Thanks!