Screen Overrun

Hi guys...

I have a centered div using the 50% and 1/2-dimensions negative margin
thing, but when the screen is shrunk, the div goes off the screen beyond
what the scroll bars can compensate for. Apparently there is some sort of
"body>#div" margin trick that margins the div in question flush with the
screen, but I have yet to implement it successfully.
Any tips or tricks? Should I be enclosing the div in another one, the height
& width of 100%?
http://members.rogers.com/rmacinty2/rohcg/as.htm

"Richard" <some (AT) where (DOT) com> wrote

Hi guys...

I have a centered div using the 50% and 1/2-dimensions negative margin
thing, but when the screen is shrunk, the div goes off the screen beyond
what the scroll bars can compensate for. Apparently there is some sort of
"body>#div" margin trick that margins the div in question flush with the
screen, but I have yet to implement it successfully.
Any tips or tricks? Should I be enclosing the div in another one, the
height
& width of 100%?
http://members.rogers.com/rmacinty2/rohcg/as.htm


Hi Richard,

Not quite sure what yo are trying to achieve with negative margins and
absolute positioning here.
I'm not good at explaining things but here goes:
In #main
replace position:absolute with position: relative.
delete left:50% & top:50%;
replace margin-left:-320px; & margin-top:-240px; with margin:50px auto;
And delete body>#main { margin-left:-320px; margin-top:-240px;}

so you have

position:relative;
width:640px;
height:480px;
margin:50px auto;
padding:0px;
border:2px solid black;
background-color:transparent;
text-align:center;
z-index:2;

Seems to work

"Carl Durbridge"

"Richard"
Hi guys...

I have a centered div using the 50% and 1/2-dimensions negative margin
thing, but when the screen is shrunk, the div goes off the screen beyond
what the scroll bars can compensate for. Apparently there is some sort
of
"body>#div" margin trick that margins the div in question flush with the
screen, but I have yet to implement it successfully.
Any tips or tricks? Should I be enclosing the div in another one, the
height
& width of 100%?
http://members.rogers.com/rmacinty2/rohcg/as.htm


Hi Richard,
Not quite sure what yo are trying to achieve with negative margins and
absolute positioning here.
I'm not good at explaining things but here goes:
In #main
replace position:absolute with position: relative.
delete left:50% & top:50%;
replace margin-left:-320px; & margin-top:-240px; with margin:50px auto;
And delete body>#main { margin-left:-320px; margin-top:-240px;}

so you have

position:relative;
width:640px;
height:480px;
margin:50px auto;
padding:0px;
border:2px solid black;
background-color:transparent;
text-align:center;
z-index:2;

Seems to work

Thanks, but it only works with regard to centering the div relative to left
and right. I am also looking for centering relative to top and bottom, where
the div is perfectly centered in the middle of the screen.