Jump to content

Centering with margin: auto


VaporAction
 Share

Recommended Posts

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;}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This works for me in Firefox:

<html><head>	<title>Wired Chemist</title><style>body { margin: 0px; }#Nav { background-color: #b0c4de; height: 150px; }#Nav .Text {	text-align: center;	font-family: Arial, Helvetica, sans-serif;	color: #4682B4;	width: 600px;	margin: auto;}#navH3 {	margin: 0px; 	font-size: 30px;}#navP {	font-size: 14px;}#navP:first-line {	font-size: 20px;}</style></head><body><div id="Nav">  <div class="Text">    <h3 id="navH3">Wired Chemist</h3>    <p id="navP">Chemistry     |     Mineralogy     |     Environmental     |     NMR<br><br>      Instructional     |     Data Tables     |     Links    </p>  </div></div></body></html>

Rather than having two separate divs - one for the background and another placed on top of it for the content - this uses one div for the nav bar with another div nested inside for the nav content.I hope it helps.

Link to comment
Share on other sites

the only problem with that is that it will scroll up...I want the nav bar to remain fixed on the screen while the user scrolls down....
You should simply be able to replace this in my code:
#Nav { background-color: #b0c4de; height: 150px; }

With this:

#Nav { background-color: #b0c4de; height: 150px; position: fixed; width: 100%; }

That works for me. :)

Link to comment
Share on other sites

I finally figured it out...it seems that margin: auto doesn't work with fixed positioning so I'll just go with width: 100% and text-align: center...
Just thought I'd respond to this as I had a problem figuring this out as well awhile ago. The following link was a helpful article in solving the problem.http://www.simplebits.com/notebook/2004/09/08/centering.html
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...