SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2004
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center this?

    Hi all,

    I ahve following simple CSS:

    PHP Code:
    #wrapper { 
     
    margin0 auto;
     
    width100%;
    }

    #header {
     
    width100%;
     
    floatleft;
     
    height100px;
    }

    #content {
        
    floatleft;
        
    height350px;
        
    width900px;
        
    displayinline;
    }

    #footer { 
     
    width100%;
     
    clearboth;


    I need to center the #content part. Can someone help me out her, please? I can't make it go awy from the left side. The header and footer need to be 100% in width, though.

    Many thanks,
    M

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try moving the rule "margin: 0 auto;" to the content div.
    For IE6 add a rule "text-align: center" to the wrapper div:

    Remove the "display: inline;" rule also.
    Happy ADD/ADHD with Asperger's

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Also remove the float:left from #content also:
    Code:
    #content {
    height: 350px;
        width: 900px;
        margin:auto;
    }
    Are you sure you want to set a height on #content? Otherwise it means that you will always be restricted to that height.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2004
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remove the float, I don't see the div anymore. I took the height for testing purposes now, I'll make it flexible afterwards.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If I remove the float, I don't see the div anymore
    You haven't provided any example html or a link so we are working in the dark here a bit You probably needed to add clear:both to #content seeing as your header was floated. However, if your header is 100% wide then it doesn't need to be floated either.

    We would need to see some more code css and html or preferably a live example

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe set a rule like "background-color:yellow;" to the div to make it visible. Or are they not empty?
    Happy ADD/ADHD with Asperger's

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does the full HTML and CSS look like? (Something tells me this code isn't even necessary.)


Bookmarks

Posting Permissions

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