By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Screen Overrun

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

"Richard" <so**@where.com> wrote in message
news:6t********************@news04.bloor.is.net.ca ble.rogers.com...
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:)

Jul 20 '05 #2

P: n/a

"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.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.