VaporAction Posted December 20, 2006 Share Posted December 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;} Link to comment Share on other sites More sharing options...
jlhaslip Posted December 20, 2006 Share Posted December 20, 2006 #centeredContent {width: 300px;margin-top: 30px; margin-left: auto;margin-right: auto;text-align:center;} // IE hack Link to comment Share on other sites More sharing options...
VaporAction Posted December 20, 2006 Author Share Posted December 20, 2006 #centeredContent {width: 300px;margin-top: 30px; margin-left: auto;margin-right: auto;text-align:center;} // IE hack isn't that the same as margin: auto ?and I don't need the IE hack, I'm using Firefox and it's not working...here's a link to the page, btw....http://www.karlyoder.com/wiredchemist/index.html Link to comment Share on other sites More sharing options...
vchris Posted December 20, 2006 Share Posted December 20, 2006 Use margin: 0 auto; on the container you want to center Link to comment Share on other sites More sharing options...
VaporAction Posted December 20, 2006 Author Share Posted December 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? Link to comment Share on other sites More sharing options...
aspnetguy Posted December 20, 2006 Share Posted December 20, 2006 an ugly work around would be to use js to calculate the center of the screen and adjust the left property Link to comment Share on other sites More sharing options...
jesh Posted December 20, 2006 Share Posted December 20, 2006 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 More sharing options...
VaporAction Posted December 20, 2006 Author Share Posted December 20, 2006 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.... Link to comment Share on other sites More sharing options...
jesh Posted December 20, 2006 Share Posted December 20, 2006 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 More sharing options...
VaporAction Posted December 21, 2006 Author Share Posted December 21, 2006 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... Link to comment Share on other sites More sharing options...
Griffey Posted December 24, 2006 Share Posted December 24, 2006 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 More sharing options...
aquatsr Posted December 27, 2006 Share Posted December 27, 2006 This is off-topic but nice site layout - very clean and simple. I like it. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now