robert.cfi Posted January 20, 2009 Report Share Posted January 20, 2009 hello i have a site. www.kcflight.com I am starting to learn to use css to develop the sites. I understand that many people out there have a lot different sizes of resolution. I have a fairly large res which is 1680/1050. I need to know how to keep a centered. When i create it in my css file i have to use "left: 480px;". When i do this it will always keep the object 480px from the left side of the page. There has to be a way to create it so that no matter what it will stay centered.here is an example of one of my css codes. #center_table { position: absolute; top: 9px; left: 252px; width: 776px; height: 930px; background-image: url(bgtable.png); overflow: hidden; background-repeat: no-repeat; } this code should give me a background that i made which i can add text/pic on top of it to make it look like a table. i would just like to know what i need to change to make it always stay centered. Quote Link to comment Share on other sites More sharing options...
shelfimage Posted January 20, 2009 Report Share Posted January 20, 2009 here are a couple links http://www.mezzoblue.com/tests/centered-css/ http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/ Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 20, 2009 Report Share Posted January 20, 2009 (edited) If you have a page that is over about 750px wide I would NOT rewcommend the second link which uses position: absolute; left: 50%; margin-left: (negative half the div width). What happens is that in viewports smaller than the div width the left side slides out to the left where you cannot scroll to reach it. This method is only suitable for small divs. Use the method in the first link which is a width: ???px; margin-left: auto; margin-right: auto; (or just margin: auto;) which makes the side margins equal so that the div will center. The disadvantage is that this method does not work with a position: absolute containing div, use either no position or position: relative. See http://w ww.wickham43.net/centeringdivs.php Edited January 20, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
robert.cfi Posted January 20, 2009 Author Report Share Posted January 20, 2009 thanks guys this really helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.