Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    IE8 and Firefox centring a inner div

    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
    Code:
    #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;}
    XHTML
    Code:
    <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>
    
    <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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    1. a valid DocType
    2. an element with a width
    3. 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
    Last edited by Excavator; 12-19-2010 at 04:16 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (12-19-2010)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    I have all of the three you mentioned, so I will try again, perhaps I did think it a class.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    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.
    Code:
    #holder {
    background: #f00;
    overflow: auto;
    width: 700px;
    margin: 0 auto;
    }
    Last edited by Excavator; 12-19-2010 at 07:10 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •