Centering with margin: auto

VaporAction · Dec 20, 2006

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 · Dec 20, 2006

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 · Dec 20, 2006

yep...

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

stscac · Dec 20, 2006

CSS is below

HTML:

margin-left: auto; margin-right: auto

-Steve

Dan · Dec 20, 2006

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 · Dec 20, 2006

here's the link to the page...

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

Albino · Dec 20, 2006

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 · Dec 20, 2006

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 · Dec 20, 2006

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 · Dec 20, 2006

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 · Dec 20, 2006

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 · Dec 20, 2006

VaporAction said:
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...

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 :hehe:

VaporAction · Dec 21, 2006

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 · Dec 21, 2006

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

manhuajoy.co

rachel-choi.org

miquelroyomasajista.es

doodvstream.pro

rojadirectta.me

summeracademy.live

sensyupado-plus.jp

danaandersontraining.co.uk

ceilingboardhanger.co.uk

thevillagestudentres.co.za

Centering with margin: auto

Established Member

Buy my domains.VIP Member

Established Member

A Wealth of KnowledgeVIP Member

Buy my domains.VIP Member

Established Member

Munky DesignsEstablished Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Captcha.co

PsychTest.com

uFurniture.com

CopySpider.com

Social.Media

iscratchcards.com

F12.ai

Confluence.co

Markd.com

Home.Town

Similar threads

We're social

Captcha.co

PsychTest.com

uFurniture.com

CopySpider.com

Social.Media

iscratchcards.com

F12.ai

Confluence.co

Markd.com

Home.Town

Pinned

Appreciation

Preference

Appreciation

Upvoting

Agreement

Answers

Decisions

Relevance

Reaction

Facial expressions

Vocal expressions

Status

Workflow

Clarification

Feeling

Sympathy