Jump to content
Lizard Wizard Coding Club

keeping <div> centered


Recommended Posts

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.

Link to post
Share on other sites

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 by Wickham
Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...