2 Replies - 649 Views - Last Post: 18 May 2012 - 03:28 PM

#1 pyr0t3ch  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-May 12

Can't get content centered

Posted 18 May 2012 - 02:46 PM

Hey all. I played around with html when I was 12 and 13. I'm 22 now. I just started fooling around with it again, literally last night. I tried learning from w3schools and eventually just decided that the best way for me to learn would be to take apart a template, since I already had in mind what I'd wanted in a website. So here's where I'm at: http://st0rage.org/~dan/new/

I can't seem to get everything perfectly centered in any browser. Here's my index.html file:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>I hate everything.</title>
</head>
<body>
<div id="container">
		<div id="header">
        	<h1>one<span class="off">two</span></h1>
            <h2>"kill all humans"<br>-bender</h2>
        </div>   

		<div id="content">
        
        
        <div id="content_top"></div>
        <div id="content_main">
        	<h2>big header. </h2>
        	<p>&nbsp;</p>
           	<p>&nbsp;</p>
       	  <h3>slightly smaller big header</h3>
       	  <p> not a header</p>
        	<p>&nbsp;</p>
		  <h3>more header business</h3>
        	<p> not more header business</p>
       	  <p>&nbsp;</p>
        	<h3>what the header</h3>
            <p> not a header.</p>
          <p></p>
<p>&nbsp;</p>
        </div>
        <div id="content_bottom"></div>
            
            <div id="footer"><h3><a href="http://www.bryantsmith.com">i stole a template from this man and butchered it to death</a> | <a href="http://st0rage.org">st0rage.org is the worst website in the world</a> | <a href="index.html">more links</a> | <a href="index.html">go here</a></h3></div>
      </div>
   </div>
</body>
</html>



Here's my style.css:
/* A Free Design by Bryant Smith (bryantsmith.com) and haxed to death by danTheSatanist */


body {
	margin: 0;
	padding: 0;
	text-align: left;
	font: 12px Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	background: #FACFCF;
	background-image:url(images/background.png);
	background-repeat:repeat-x;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#container
{
  display: block; 
  height:auto;
  position: relative; 
  width: 960px;
}


#header
{
height:85px;
width:960px;	
}

#header h1
{
	position:absolute;
text-align:left;
color:#FFFFFF;
font-size:43px;
color:#FFF;	
left:14px;
top:18px;
}


#header h2
{
position:absolute;
text-align:right;
color:#525252;
left:290px;
top:38px;
width:400px;
}



.off
{
color:#000;
}


#content
{
display:block;
float:left;
width:689px;
height:auto;
padding-left:10px;
padding-top:15px;
padding-right:10px;
padding-bottom:5px;

}


#content_top
{
	background-image:url(images/main_top.png);
	background-repeat:no-repeat;
	width:689px;
	height:23px;
}

#content_main
{
background-image:url(images/main_back.png);
background-repeat:repeat-y;
width:659px;
padding-left:15px;
padding-right:15px;
}

#content_bottom
{
background-image:url(images/main_bottom.png);
background-repeat:no-repeat;
width:689px;
height:23px;
}








#footer
{
width:inherit;
height:auto;
}

#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#FFF;
}


#content p
{
	
}


html, body {
text-align: center;
}
p {text-align: left;}



Is This A Good Question/Topic? 0
  • +

Replies To: Can't get content centered

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,989
  • Joined: 08-June 10

Re: Can't get content centered

Posted 18 May 2012 - 03:06 PM

Hey.

It seems your #container is wider than the #content, and even though both are centered correctly from the margin: 0 auto; you set on all the elements, the content also has float: left defined so it doesn't respect the margins.

The solution here is to adjust the width of the container to fit the content. That way the extra margins inside the container are removed and everything appears centered.

You may also want to remove the width style from the header. It's pointless, seeing as it is already a block element (and they already stretch to fit inside the parent by default) and everything inside it is absolutely positioned anyways.
Was This Post Helpful? 0
  • +
  • -

#3 pyr0t3ch  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-May 12

Re: Can't get content centered

Posted 18 May 2012 - 03:28 PM

That worked beautifully, thank you!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1