#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    5
    Rep Power
    0

    Centering an entire page in CSS?


    I have every single component of my web page positioned absolutely with CSS. This is fine for most "standard" resolutions, but on high resolutions it looks really stupid having everything on the left hand side of the page.

    Most major websites manage to have their content centered on the page. How can I do this with CSS since I can't just use a <center> as everything is divided into <div class="">?
  2. #2
  3. No Profile Picture
    Perl Ronin
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Posts
    152
    Rep Power
    13
    Here's a not too difficult but kinda ugly solution. Love to see if anyone has a slicker way of doing it...

    The basic principal is creating a containing DIV that defaults to the width of the browser, and centerss all content with it. Then, create a "content div" that is the parent of the DIV's that really position your content.

    The "2nd Level Div" (the one the contains your content" should be positioned relative, and then no values entered. Here's an example you can cut and paste into a text doc and put in your browser to understand. I just wish when you position stuff, containing DIV's got taller ... *shrugs*

    Code:
    <HTML>
    <HEAD>
    
    	<STYLE TYPE='text/css'>
    	
    	body	   { margin:0px; }
    	#fullPage  { border:2px red solid; }
    	#enclosing { align:center; width:400px; height:auto; border:1px black solid; position:relative }
    	
    	#somecontent { position:relative; top:0px; left:0px }
    	#morecontent { background-color:red; top:20px; left:100px; width:76px; height:76px }
    	
    	</STYLE>
    	
    </HEAD>
    
    
    <BODY>
    <DIV ID="fullPage" align='CENTER'>
    <DIV ID="enclosing" align='LEFT'>
    
    
    
    
    	<!--- Your *actual* page starts here --->
    	<DIV ID="somecontent">
    	Hi there! How are you today?
    	</DIV>
    
    
    	<DIV ID="morecontent">
    	&nbsp;
    	</DIV>
    
    
    
    
    
    
    
    </DIV>
    </DIV>
    </BODY>
    </HTML>
    You can even "center the page off-center" by assigning value #enclosing for left pixels ... it will then center that # of pixels off to the right. Just give #enclosing a left value and play with it if you don't understand me.

    # Erik


    PS: Above HTML checked & verified in IE5.1/Mac
    Last edited by ErikSean; May 13th, 2003 at 01:48 PM.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    5
    Rep Power
    0
    Thanks, I'll give it a shot. It seems that this is indeed an ugly situation, but I'll try to work through it. I wasn't even aware that there was a way to use nested <div> tags.

    Thanks for your help,
    Kevin
  6. #4
  7. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Create a conatiner div and set the margins to auto. Sounds like you used set widths?
    Code:
    <style>
    body
      {
      text-align: center /* required by some versions of IE -- but not proper */
      }
    #all
      {
      width: 750px; /* whatever your site width is */
      margin-left: auto;
      margin-right: auto;
      }
    </style>
    
    <div id="all"><!-- positioning div centers content -->
      <!-- all other content divs -->
    </div>
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    5
    Rep Power
    0
    I use set widths about 50% of the time, it just depends on what I'm formatting. Usually just on text and backgrounds.

    I'll try what you suggested and will let you know if I have any problems.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    5
    Rep Power
    0
    ErikSean:
    Thanks! After quite a bit of tinkering around, I finally got it to work. Once again thank you, I really appreciate it. Awesome.

    jharnois:
    Thanks to you as well. It didn't do quite what I wanted it to do, but I saved it to my code snippet journal and am sure that it will come in very helpful another time.

    Thanks again,
    Kevin
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    5
    Rep Power
    0

    centering a page with CSS


    ok so ive tried tinkering with nested divs and margins and whatnot and managed to get the page centered. however then i found it was necessary to use relative positioning instead of absolute...fair enough. but the problem then occurs that after placing an image on the page, the position of the "containing block" moves down to the space below the image even though technically the containing block is still the div that contains both images.
    so i found that with negative position values I can correct this and get two images on the same horizontal space but this doesnt seem to correspond to what is dictated in the W3C guidelines which makes me worry that it wont be so cross browser compatible.
    Can anyone shed some light on this situation for me?
    Thanks,
    Brian
  14. #8
  15. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11
    Originally posted by ErikSean
    The "2nd Level Div" (the one the contains your content" should be positioned relative
    Sadly, I think that's the only way to do it, and there's a problem when you start z-indexing divs. I'm pretty sure to use z-index, you need to use absolute positioning (which is stupid).

    here's an article about the whole thing... http://www.mezzoblue.com/tests/centered-css/ pretty good stuff.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    5
    Rep Power
    0

    CSS centering the page


    yeah that article covers it pretty clearly. thanks for that.
    though while reading it, i couldnt help feeling that tables sound more appealing...
    i got the impression upon reading the W3C CSS2 details that "absolute" refers not to the entire page but to the next ouitermost containing block adn that relative positioning was either meant for position changes or perhaps position relative to the cursor. if this is the case then it seems that more browser compatibility issues are on the way.

IMN logo majestic logo threadwatch logo seochat tools logo