Centering Div in CSS

Discussion in 'CSS' started by mmelen, Oct 7, 2007.

0
  1. #1
    I tried to center the DIV: http://tlkabout.com/
    But it works in IE or Mozilla... (one reads padding differently), I can't get it to work on both.

    Any ideas on how else to center?
     
    mmelen, Oct 7, 2007 IP
  2. kkrizka

    kkrizka Peon

    Messages:
    223
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I use the following to center stuff:

    
<html>
<head>
<style>
body {
text-align: center;
}

div#body {
text-align: left;
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div id="body">
Hi there, this text should be in the center!
</div>
</body>
    Code (markup):
    That should work on most browsers.
     
    kkrizka, Oct 7, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    That should do it. I would advise against using a div named "body" because you'll get that confused with the BODY{} selector. Just name it "wrapper" like everyone else does, or "container".
     
    soulscratch, Oct 7, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Well, you should add a valid doctype so IE isn't in "quirks mode", and as such handles margins and padding (for the most part) like the rest of the world. Then, you might want to open your body tag (just an idea).

    As for centering it, your current technique has some flaws... and the code itself has some issues. You have a paragraph, mark it up as such... and classnames like 'font' and 'small' are more presentational than meaningful.

    ... and seriously, DON'T use Windows-1252 as a character type. Support non-windows is piss poor and as character sets go, it's more headache than it's worth.

    I'm also seeing a pt font size - usually fine, but if you are trying to center top to bottom, pt will automatically resize on large font machines breaking your centering - as such I'd consider switching to px. Any other font metric won't scale top to bottom properly... and always remember to state fallback families in your CSS.

    The margin-left to offset the left:50% is also 'flawed', in that you are only doing -320px - you need to include the PADDING in that if in 'standards' mode in IE, and for FF, Opera, Safari - basically everything BUT IE quirks - therin you should be using 355px, not 320.

    Pretty much something like:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>
	TLKABOUT.COM : Discuss Websites, Movies, Music, People, Books, Games and More!
</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body {
	color:#F77776;
	background:#FFF;
	font:normal 16px/32px tahoma,helvetica,sans-serif;
}

#container {
	position:absolute;
	top:50%;
	left:50%;
	width:641px;
	margin:-200px 0 0 -355px;
	padding:35px;
	background:url(http://www.tlkabout.com/stripes.gif);
}

h1 {
	text-align:center;
	font:bold 22px/24px "comic sans MS",helvetica,sans-serif;
	position:relative;
	height:126px;
}

h1 a {
	text-decoration:none;
	color:#E65;
}

h1 strong {
	display:block;
	font:bold 64px/68px "comic sans MS",helvetica,sans-serif;
}

h1 span {
	position:absolute;
	top:0;
	left:0;
	width:641px;
	height:126px;
	background:url(http://www.tlkabout.com/logo.gif);
}

p {
	text-align:justify;
}

#footer {
	display:block;
	margin-top:2em;
	color:#E65;
	font:normal 16px/24px tahoma,helvetica,sans-serif;
	text-decoration:none;
}

#footer:active,
#footer:focus,
#footer:hover {
	font-weight:bold;
}

</style>

</head><body>

<div id="container">

	<h1>
		<a href="http://www.tlkabout.com">
			<strong>TLKABOUT.COM</strong>
			Websites - Movies - Music - People - Books - Games - Other
			<span></span>
		</a>
	</h1>

	<p>
		tlkabout.com/ is a new social bookmarking site expanding 
		from the classical &quot;website bookmarking&quot; 
		concept. TlkAbout.com will let users discuss and rate websites, 
		movies, music people, books, games and more. Users will be able to 
		create discussions and obtain points for participating in the 
		website.
	</p>

	<a id="footer" href="http://www.melen.net">
		Created by Michael Melen. Part of the Melen Network.
	</a>
</div>

</body></html>
    Code (markup):
    Of course, this assumes the height is going to be fixed - if you are going to have a height that changes from page to page, the only 'real' option is to break down and use a table.

    Though I'm ASSUMING you want it centered top to bottom as well as left to right - if not, ditch ALL the absolute positioning and just give the thing auto margins left and right like everyone else was saying. (and text-align:center on the body for IE 5.x if you still care about that one)

    Oh, you are probably wondering about the H1 with the empty span - that's a technique I use so that 'images off' the page still looks 'similar'. You format the text in a manner that looks much akin to the image using tags like 'strong','b','em','i',etc, etc... then position an empty span over them using the image to hide the text. Images off, the header appears. Only works with non-transparent images though :(
     
    deathshadow, Oct 7, 2007 IP