Strange CSS positioning error

[Freedom-n-Democrazy]

I've got a DIV inside another DIV and I am trying make it centred using margin-left: auto; and margin-right: auto;, but its not working.

This is the hierarchy in which the DIV (DIV.cartcontent) lives in:

 

BODY {

background-attachment: fixed;

background-image: url("/bodybackground.png");

background-position: center;

background-repeat: no-repeat;

color: rgb(255,215,0);

font-family: verdana

}

DIV.main {

background-color: black;

height: 636px;

left: 50%;

margin-left: -635px;

margin-top: -307px;

position: absolute;

top: 50%;

width: 1270px

}

DIV.cartcontent {

border-style: solid;

border-width: 1px;

height: 562px;

margin-left: auto;

margin-right: auto;

margin-top: 57px;

overflow: auto;

overflow-x: hidden;

padding: 5px;

position: absolute

}

 

Does anyone know why its not working?

[Buddski]

position:absolute;

That is whats killing it, also if you do not define a width the margin autos will be useless as it will be 100% of the parent container

[AyKay47]

change to

 

 

DIV.cartcontent {
   width: 100%;
   border-style: solid;
   border-width: 1px;
   height: 562px;
   margin: 57px auto 0 auto;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 5px;
   position: relative;
}

 

should work for you

 

EDIT: also, why is your main div absolute? perhaps you are misunderstanding the use of position: absolute?

this is meant to take the div out of the "flow" of other elements.. your main div appears to be the div you are using to store all of your info.. position: absolute here is not ideal..