PDA

View Full Version : Resolved Div not centering



quartzy
Jan 7th, 2011, 11:54 PM
I am using all the tenchniques I know but my div will not center in the middle of the page. http://www.leeoasis.org.uk/lee_oasis_news_and_events.html

This is the relevant code:
div.pictures {overflow: hidden; margin: 0; padding-bottom: 5px; list-style: none; width: 100%; text-align: left}
ul.pictures {width: 100%;}
.pictures li {float: left; width: 328px; border: 1px solid #CCC; margin: 5px; padding: 5px; display: inline; font-size: 0.78em;text-align: center;}
span.caption {text-align: center; font-size: 0.78em;}


the html
<div class="textbox_outer">
<div class="textbox_inner">
<h2>News and Events</h2>
<h3>Christmas - December 2010</h3>
<br />
<div class="pictures">
<ul>
<li>
<img alt="Volunteers at the Christmas Eve food drop" height="239" src="Christmas%20Eve%20volunteer%20food%20drop%20to%20hostels%202010.jpg" width="320" /><br />
<span class="caption">Christmas Eve - Hostel food drop off</span></li>
<li>
<img alt="Van team volunteers pop in for a cuppa" height="239" src="Van%20team%20volunteers%20pop%20in%20for%20a%20cuppa%20Christmas%202010.jpg" width="320" /><br />
<span class="caption">Van Team Volunteers pop in for a cuppa</span></li>
<li>
<img alt="Drop-in Crowd Christmas Party" height="239" src="The%20drop-in%20crowd%20Christmas%20party%202010.jpg" width="320" /><br />
<span class="caption">Drop-in crowd Christmas Party</span></li>
<li>
<img alt="Lee Oasis Christmas Party - 2010" height="239" src="Lee%20Oasis%20Christmas%20party%20at%20the%20drop%20in%202010.jpg" width="320" /><br />
<span class="caption">Lee Oasis Christmas Party Image 2</span></li>
</ul>
</div><!--pictures--></div><!--textbox_inner--></div><!--textbox_outer--><div class="clear"></div><!--

The images are in a list, that I just want to display in the centre of the page, as in IE8 the pictures are massive but in FF they are smaller looking, it is better for them all to be in the centre and so make everything look better.

Excavator
Jan 8th, 2011, 12:19 AM
Hello quartzy,
You have margin: 30px on that containing div... that will not center it.

Try this instead -

#container {
width: 90%;
max-width: 1250px !important;
height: 100%;
/*margin: 30px;*/
margin: 0 auto;
text-align: center;/*Hack to fix IE6 to center*/
}

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto



.pictures is different. You cannot center a 100% width element.
For that, maybe some CSS like this would work -

div.pictures {
overflow: hidden;
margin: 0 auto;
padding-bottom: 5px;
list-style: none;
width: 700px;
text-align: left;
}

quartzy
Jan 8th, 2011, 12:48 AM
I had not realised my container div was out, thanks for that, I will use the same method to hopefully get my inner divs right.

quartzy
Jan 8th, 2011, 12:59 AM
I thought that pictures would work on percentages, it was only when I set a fixed width that the pictures centred. Thanks very much, understand now, the margin auto did not work either.