View Full Version : IE8 and Firefox centring a inner div

12-19-2010, 04:04 PM
I am using FF and IE8 initially to test my site. In IE8 the content fills the whole of the page. But in FF it goes over to the left. So I thought I would centre the content. Except nothing is happening. Have I done it correctly? I made a div called holder to be centred. In IE8 nothing will happen but hopefully in FF it will be centred but it is not.

Relevant CSS

#left2 {width: 232px; float:left; display:inline;}
#right2 {width: 232px; float:left; display:inline;}
#center2 {width: 232px; float:left; display: inline; }
.holder {width: 100%; margin: 0 auto; display: inline; position: relative;}


<div class="textbox_outer">
<div class="textbox_inner">
<h2>News and Events</h2>
<h3>Current News</h3>
<a id="current"></a><br />
<h4>The Lee Oasis Christmas party</h4>
<p>Open to all comers 10-noon at the Drop-in on Tuesday December 16th</p>
<h3>Lewisham People&#39;s Day</h3>
<p>Every year we usually get a stall at Lewisham&#39;s People&#39;s day, to
raise much needed funds. Here are some of the images that were taken
of our team of volunteers.<br /><br /></p>

<div id="holder">
<div id="left2">
<p class="caption">
<img alt="Audrey at People's Day" class="border" height="169" src="images/lpdaudrey.jpg" width="225" /><br />Audrey at People&#39;s Day</p><br /><p class="caption">
<img alt="funraising volunteer outside of sainbury's" class="border" height="293" src="images/sainsburys.jpg" width="225" /><br />
Our Volunteer, outside of Sainsbury&#39;s</p>

<div id="center2">
<p class="caption">
<img alt="peoples day image 2" class="border" height="169" src="images/peoples_day_2008_2.jpg" width="225" /><br />People&#39;s Day, the team - view 2</p><br /><p class="caption"><br />
<br /><img alt="Sainsburies shoebox gifts with Michelle" class="border" height="169" src="images/michelle_sainsbury's_shoebox_%20gifts_2009.jpg" style="vertical-align: bottom;" width="225" />Michell and Sainsbury&#39;s Shoebox Gifts</p></div>

<div id="right2"><p class="caption"><img alt="Lewisham's People's Day image 2" class="border" height="236" src="images/george.jpg" width="200" /><br />George our volunteer People&#39;s Day</p>
<h3 class="indent">Fundraising</h3><p class="indent">Our volunteers raising awareness
of Lee Oasis and fundraising<br />outside of Sainsbury&#39;s, Lee.</p></div></div>

<div class="clear"></div><p class="right"><img alt="arrow up icon image" height="14" src="images/arrow_up.jpg" width="11" /><a href="#top">Top</a></p></div> www.leeoasis.org.uk/news.html

12-19-2010, 04:13 PM
Hello quartzy,
It's kind of hard to center a 100% width div. Put a temporary background color on that to see why.

To center an element you need three things:

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

///edit - looking closer I see it is an id in your markup - <div id="holder"> so .holder in your CSS should be #holder

12-19-2010, 07:02 PM
I have all of the three you mentioned, so I will try again, perhaps I did think it a class.

12-19-2010, 07:06 PM
I have all of the three you mentioned, so I will try again, perhaps I did think it a class.

width:100%; gives it nowhere to go. To center it, it would have to be less than full width.

#holder {
background: #f00;
overflow: auto;
width: 700px;
margin: 0 auto;