Centering the content in XHTML 1.0 Strict

Discussion in 'HTML & Website Design' started by cre8ive, Mar 27, 2008.

0
  1. #1
    I need to center the content in XHTML 1.0 Strict. I have the following code:

    
<body>
	<div style="border: 1px solid #336699; width: 700px;">
		<table cellpadding="0" cellspacing="0" style="height: 340px; width: 700px;">
...
		</table>
	</div>
</body>
    Code (markup):
    Right now, this content is placed on the left side; I want to place this in the center. How can I do that?

    (BTW, http://www.cre8iveonline.com/charity/index.htm is where this website, which is work in progress, is hosted.)
     
    cre8ive, Mar 27, 2008 IP
  2. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #2
    You may want to use the margin:auto stlye property for the container div. 
    <div style="border: 1px solid #336699; width: 700px;margin:auto">
    Code (markup):
    :)
     
    Bagi Zoltán, Mar 27, 2008 IP
  3. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you can use the 
    <center><p>content</p></center>
    HTML:
    but that is not recommended since it is depreciated, a cool trick i found (which works sometimes) is to use padding in the body with a fixed width div

    
<body style="padding: 0 50px">
    <div style="width: 800px; height: 600px">
        <p>content</p>
    </div>
</body>
    HTML:
    it may work? :confused:
     
    mz906, Mar 27, 2008 IP
  4. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    
<style type="text/css">
body
{
margin: 0 auto;
text-align: center;
}
div
{
text-align: left;
}
</style>
    Code (markup):
    Place the above in the <head> section of your website.
     
    nicangeli, Mar 27, 2008 IP
  5. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Add this attribute to the div you want centered: margin:0 auto; ;)
     
    risoknop, Mar 27, 2008 IP
  6. jocelyn06

    jocelyn06 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Tables are for data representation, not layouts, btw.
     
    jocelyn06, Mar 28, 2008 IP
  7. mds

    mds Active Member

    Messages:
    256
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #7
    Yes but there is still much love for <table> here. I use <div> for clients but i still retain the classic <table> in personal designs.
     
    mds, Mar 28, 2008 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    From the guy who first used tables for layout, Google for the article at XML.com "The Web Is Ruined and I Ruined It."
     
    drhowarddrfine, Mar 28, 2008 IP
  9. koahost

    koahost Active Member

    Messages:
    457
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #9

    But after checking your layout it's ruined already your combining tables and bad div styling! That design of yours is using so many code which isnt needed at all. I would recode it from the psd file and learn css/html on the process because I think you just used photoshop to create this html.
     
    koahost, Mar 29, 2008 IP