Centering with margin: auto

VaporAction · 12-19-2006, 06:16 PM

I'm new to HTML and CSS...I'm trying to center content on the page so that it will remain centered even when the window is resized...I've tried using margin: auto but that isn't working...
I'm using Firefox, not IE so it's not the browser...

the code runs something like this...
HTML....

<div id="centeredContent">blahblahblah</div>

CSS....

#centeredContent {position:fixed; top: 30px; width: 300px; margin: auto;}

Dan · 12-19-2006, 06:24 PM

Do you have a doctype set?

If not, use

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 profile="http://gmpg.org/xfn/11">

for the first 3 lines of your code.

VaporAction · 12-19-2006, 07:12 PM

yep...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

stscac · 12-19-2006, 08:05 PM

CSS is below

HTML Code:

margin-left: auto; margin-right: auto

-Steve

Dan · 12-19-2006, 09:09 PM

margin: auto; sets all sides to margin: auto; and since the top and bottom can't be, it's the same as just doing what you did or margin: 0 auto;

VaporAction, can you show us the page?

VaporAction · 12-20-2006, 07:17 AM

here's the link to the page...

http://www.karlyoder.com/wiredchemist/index.html

Albino · 12-20-2006, 08:06 AM

im not sure if this will help, but:

body{
text-align:center;
}

#centeredcontent{
margin-left:auto;
margin-right:auto;
}

that will make the content be centered, although it may not be exactly what you want.

Gaz · 12-20-2006, 08:42 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head><title>Wired Chemist</title>
<style type="text/css">

body {
	padding: 0;
	margin: 0;
} 

#navText {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #4682B4;
	width: 100%;	
	background: #b0c4de;
	margin-top: -30px;
	left: 0;
}

#navH3 {
	font-size: 30px;
	top: 20px;
}
</style>
</head>
<body>
	<div id="navText">
		<h3 id="navH3">Wired Chemist</h3>
		<p id="navP">Chemistry | Mineralogy | Environmental | NMR<br><br>Instructional | Data Tables | Links</p>
	</div>
</body>
</html>

this works better imo.

VaporAction · 12-20-2006, 08:49 AM

shouldn't margin: auto simply work?
I'm not using IE so I don't need to do the text-align: center...

why the $#@$% isn't margin: auto working????

Gaz · 12-20-2006, 08:54 AM

text-align: center; is aligning your text in the centre of the div which is at 100% width. Margin: auto, will assign the left and right margins an equal ammount, but also the top and bottom one, margin: 0px auto; will assign your top and bottom margin's 0 and your left and right ones auto.

Before you can use these techniques, you must first understand how they work.

VaporAction · 12-20-2006, 09:33 AM

finally figured out the problem...
margin: auto doesn't work with positioning...
which ***** cause I want to have an element whose positioning is fixed vertically (a top navigation bar that will stay fixed as the user scrolls down) but whose width stays centered during resize....anybody know how to do this without resorting to frames?

I tried using width: 100% and text-align: center but multiple lines of text get unaligned with each other if the window is resized...

Gaz · 12-20-2006, 09:48 AM

Originally Posted by VaporAction

finally figured out the problem...
????: NamePros.com http://www.namepros.com/programming/271149-centering-with-margin-auto.html
margin: auto doesn't work with positioning...
which ***** cause I want to have an element whose positioning is fixed vertically (a top navigation bar that will stay fixed as the user scrolls down) but whose width stays centered during resize....anybody know how to do this without resorting to frames?

I tried using width: 100% and text-align: center but multiple lines of text get unaligned with each other if the window is resized...

Place all your content in #content

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head><title>Wired Chemist</title>
<style type="text/css">

body {
	padding: 0;
	margin: 0;
} 

#navText {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #4682B4;
	width: 100%;	
	background: #b0c4de;
	margin-top: -30px;
	left: 0;
	position: fixed;
}

#navH3 {
	font-size: 30px;
	top: 20px;
}

#content {
	width: 800px;
	padding-top: 140px;
	margin-left: auto;
	margin-right: auto;
}
</style>
</head>
<body>
	<div id="navText">
		<h3 id="navH3">Wired Chemist</h3>
		<p id="navP">Chemistry | Mineralogy | Environmental | NMR<br><br>Instructional | Data Tables | Links</p>
	</div>
	<div id="content">
	blah
	<br>
	<br>
	<br>
	<br>
	<br><br>
	<br><br><br>
	<br><br><br>blah
	</div>
</body>
</html>

thought u said it doesn't work

VaporAction · 12-21-2006, 07:21 AM

I said the nav bar doesn't work with margin: auto because it needs to have fixed positioning...the content works fine with margin: auto because it isn't fixed...

Gaz · 12-21-2006, 04:31 PM

can you not see i have fixed your problem?
you tried to over complicate something. which is now fixed...

12-19-2006, 06:16 PM	THREAD STARTER #1 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	Centering with margin: auto I'm new to HTML and CSS...I'm trying to center content on the page so that it will remain centered even when the window is resized...I've tried using margin: auto but that isn't working... I'm using Firefox, not IE so it's not the browser... the code runs something like this... HTML.... <div id="centeredContent">blahblahblah</div> CSS.... #centeredContent {position:fixed; top: 30px; width: 300px; margin: auto;}

12-19-2006, 08:05 PM	#4 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,809	CSS is below HTML Code: margin-left: auto; margin-right: auto -Steve

12-20-2006, 08:54 AM	#10 (permalink)
Gaz NamePros Member Join Date: Dec 2006 Location: Plymouth Posts: 27	text-align: center; is aligning your text in the centre of the div which is at 100% width. Margin: auto, will assign the left and right margins an equal ammount, but also the top and bottom one, margin: 0px auto; will assign your top and bottom margin's 0 and your left and right ones auto. Before you can use these techniques, you must first understand how they work. __________________ dramaticRED - My Online Portfolio

12-21-2006, 04:31 PM	#14 (permalink)
Gaz NamePros Member Join Date: Dec 2006 Location: Plymouth Posts: 27	can you not see i have fixed your problem? you tried to over complicate something. which is now fixed... __________________ dramaticRED - My Online Portfolio

12-19-2006, 07:12 PM	THREAD STARTER #3 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	yep... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

12-19-2006, 09:09 PM	#5 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,796	margin: auto; sets all sides to margin: auto; and since the top and bottom can't be, it's the same as just doing what you did or margin: 0 auto; VaporAction, can you show us the page?

12-20-2006, 07:17 AM	THREAD STARTER #6 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	here's the link to the page... http://www.karlyoder.com/wiredchemist/index.html

12-20-2006, 08:06 AM	#7 (permalink)
Albino Munky Designs Join Date: May 2005 Posts: 996	im not sure if this will help, but: body{ text-align:center; } #centeredcontent{ margin-left:auto; margin-right:auto; } that will make the content be centered, although it may not be exactly what you want.

12-20-2006, 08:49 AM	THREAD STARTER #9 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	shouldn't margin: auto simply work? I'm not using IE so I don't need to do the text-align: center... why the $#@$% isn't margin: auto working????

12-20-2006, 09:33 AM	THREAD STARTER #11 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	finally figured out the problem... margin: auto doesn't work with positioning... which ***** cause I want to have an element whose positioning is fixed vertically (a top navigation bar that will stay fixed as the user scrolls down) but whose width stays centered during resize....anybody know how to do this without resorting to frames? I tried using width: 100% and text-align: center but multiple lines of text get unaligned with each other if the window is resized...

12-21-2006, 07:21 AM	THREAD STARTER #13 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	I said the nav bar doesn't work with margin: auto because it needs to have fixed positioning...the content works fine with margin: auto because it isn't fixed...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)