Help with centering UL in a DIV?

Hi all,

A little complicated maybe - I’m using the innerfade JScript to display images on the home page of a photography site for a friend. The images are added as an unordered list before being displayed via the script.

I’m having issues centering this slideshow on the page (I’m using a fluid layout) and have only a very basic grasp of what I’m doing or how my code works! it’s all new to me! Here’s the code:

HTML


<div id="leftcolumn">
			<div id="rightcolumn">
				<div id="center">
					<div id="slideshow">
						<ul id="slides">  
						<li><img src="Image1.jpg" width="500px"/></li>
						<li><img src="Image2.jpg" width="500px"/></li>
						<li><img src="Image3.jpg" width="500px"/></li>
						<li><img src="Image4.jpg" width="500px"/></li> 
						</ul> 
					</div>
				</div>
			</div>
		</div>	

CSS


#leftcolumn {
    width:100%;
    background: url('leftcolumn.png') repeat-y;
    min-width:775px;
    overflow:inherit;
}
#rightcolumn {
	width: 100%; 
	background: url('rightcolumn.png') repeat-y 50%;
	background-position:top right;
	min-width: 775px;
	overflow:inherit;
}
#center {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	color: #603913;
	min-width: 589px;
	min-height: 457px;
	overflow: inherit;
	padding: 10px 10px 10px 10px;
	margin-right: 78px;
	margin-left: 78px;
}
#slideshow {
	height: 300px;
	text-align:center;
	margin:0 auto;
}
#slideshow ul#slides li{
	list-style:none;
	margin-right:-50px;
	margin-left:-50px;
	width:100%;
	display:inline;
}

You’ll note the -50px margin-right/left in the slides list CSS - I don’t know why exactly but this makes it stay more or less central in FF/Chrome/Opera but what should I be doing?

As for IE the slideshow is leaping off the right hand of the page for some reason - any ideas? I should point out that I have an alternate IE stylesheet that implements a min width fix - however, the slideshow divs are inside this fix, so I’m not sure why it’s leaving the page?

Any thoughts or ideas gratefully recieved! :slight_smile:

It’s a little hard without a live link, but the first thing I’d suggest is to get rid of the #center div. That’s surplus to need and looks like it would complicate things. The main centering device you need is margin: 0 auto; to center the UL, which you have.

Something like this should be all you need:

#slideshow {
        width: 500px;
	height: 300px;
	margin:0 auto;
}

Of course, the JS will be adding in extra styles, no doubt, which might complicate matters, which is why a live link is much more helpful.

Hi Ralph,

Sorry for the slow reply, but wanted to say thanks for your advice - in spite of no link :shifty:

I’d been holding on to that <center> div like some sort of disastrous comfort blanket as it was part of my journey towards good code. It’s the bin now though!

I’ve just spent a couple of hours making that change and trimming things down generally and the UL, and therefore slideshow, now centers nicely, although I’m not sure what was preventing it.

Thanks muchly for your tip. Lots of folks on Sitepoint have help immensely with my education (from a complete novice) and the construction of this site and it’s incredibly helpful so thank you! :slight_smile:

Great, glad that helped. Please come back if you have more questions. :slight_smile: