CSS for large DIV inside smaller DIV (overflow:hidden), possible to center large DIV?

Brad Bansner
Brad Bansner used Ask the Experts™
on
I have a 100% x 500px DIV, overflow:hidden, position:relative.

Inside it is a 2000px x 500px DIV that I am going to shift around with Javascript, position:absolute.

Since the container DIV fills the entire screen left-to-right, I don't know what its width will be. I would like to center the interior DIV, but I can't because I don't know how many pixels to offset to make it centered.

Can this be done with a simple CSS setting? Or do I have to do something more involved, like with jQuery, to calculate its position and adjust dynamically?

Thank you!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
try  left:50%; margin-left:-1000px;

tst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<title>Test</title>
<style type="text/css">
html, body{      width:100%; margin:0px; }
#DIV1{      position:relative; width:100%; height:500px; border:1px solid red; overflow:hidden; }
#DIV2{      position:absolute; width:2000px; height:500px; border:1px solid green; left:50%; margin-left:-1000px; }
</style>
</head>
<body>
<div id="DIV1">
<div id="DIV2"></div>
</div>
</body>
</html>
Brad BansnerWeb Developer

Author

Commented:
Ah, awesome! Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial