Jump to content

Trying to center my CSS layout


yldziner
 Share

Recommended Posts

body { margin: 0 auto; } Might work
and if it doesn't try this, position with negative left margin:#container {position:relative|absolute|fixed; top:whatever; left:50%; width(essential):whatever; margin-left: -half_the_width; }Your dimensions don't have to be in pixels; ems work well, because if the viewer resizes or if their screen-res is different to yours, the layout won't break.
Link to comment
Share on other sites

the absolute positioning of the page elements won't allow for centering of that page...
Have you checked? the nested absolutley-positioned elements would then be positioned *relative* to the container.
Link to comment
Share on other sites

apologies, my explanation was confusing. Change your

container {position:relative|absolute|fixed; top:0; left:50%;width(essential):1000;margin-left: 500; }

to

container {position:absolute; top:0px; left:50%;width:1000px;margin-left: -500px; }

I meant that you could use any version of positioning; and that, in order for the negative left margin to work accurately (it pulls the element back to the left), it has to be half the width of the container: therefore specifying a width for #container is essential. NB the minus sign in fromt of the left-margin; also good to specify your units, although most browsers will read no-units-specified as pixels.Also good practice to specify a doctype:w3schools doctype infohth

Link to comment
Share on other sites

although most browsers will read no-units-specified as pixels.
Must be using IE.A Standards Compliant Browser will fail to use the measurement without a unit of measurement qualifier such as px, em, %, etc. which is the correct method.
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...