SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast nosnevel's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating content -- how to center this block??

    I am using CSS to format a simple page, with all the visible content in the "content" div:
    Code:
    #content {
    	border: #630 2px solid;
    	padding: 15px;
    	background: #e4e1cd;
    	width: 750px;
    	}
    Question: how can I center this entire 750px-wide box on the page (text should remain left-justified)?

    Simple question, I'm sure. . . Thanks!!
    Larry Levenson
    Sigma Web Technologies - Prescott Valley, AZ, USA
    http://www.SigmaWebTechnologies.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think BonRouge's mind is on other matters as his code will do nothing lol

    Heres the solution which is covered in the FAQ thread.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body{text-align:center;}/* for ie5 and 5.5.*/
    #content {
    border:2px solid #630;
    padding: 15px;
    background: #e4e1cd;
    width: 750px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;/*re-set text*/
    }
    </style>
    </head>
    <body>
    <div id="content">Some content</div>
    </body>
    </html>
    You just need margin-left:auto and margin-right:auto on a fixed width element to centre in compliant browers. IE5 needs the text-align:center hack (explained in the FAQ).

    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast nosnevel's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that works! Thank you, Paul. I learned something new this morning!

    Larry
    Larry Levenson
    Sigma Web Technologies - Prescott Valley, AZ, USA
    http://www.SigmaWebTechnologies.com


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
  •