Centering the DIV with Overflow Hidden

eclipsemedia · 01-16-2012, 09:42 PM

Hey everyone. This one has me stuck.

I need the ability to center an image (1598px wide) in a DIV at 100% width and overflow is Hidden.

I cannot use the background-url CSS with background-position CSS and background-repeat CSS as I have in the past. The reason why is because I will be replacing the img with a slideshow. I need the slideshow fill the whole screen like a background would. Here is an example

http://www.besthostingplanever.com/test/divcentering.html

This is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Samplet</title>
<style>

.slide {
text-align:center;
position:relative;
display: inline-block;
overflow:hidden;
height:433px;
width:100%;
}
</style>

</head>

<body bgcolor="#090000" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

<div class="slide"><img src="images/sampleslide.jpg" width="1598" height="433" /></div>
</body>
</html>

Its so close! I have it 100% so the image takes up the whole screen, I have the overflow hidden so there will be no left and right scrolling for monitors smaller then 1598pixels (width of image) but I need the hidden overflow to be equal on the left and right side making the image centered.

I hope someone can crack this one. I searched for a long time and maybe I'm not searching the right keywords but I can't get the answer.

Thank you in advance!

djh101 · 01-17-2012, 08:19 AM

I can't think of a way this could be done with pure CSS (without the background property). Would it be possible for you to use Javascript?

Code:

<img style="position: relative;" onload="
this.style.left=(this.parentNode.offsetWidth-this.offsetWidth)/2+'px';
this.style.top=(this.parentNode.offsetHeight-this.offsetHeight)/2+'px';"
  />

eclipsemedia · 01-17-2012, 01:53 PM

I had a feeling this might be the case. What I think I may need to do is is make the widest slide 1340pixels and use javascript to disable horizonal scrolling for resolutions 1024x768 (or between 1024 and 1366) or lower. I saw statistics at http://www.w3schools.com/browsers/browsers_display.asp that show 14% people have 1024x768 resolutions.

Thanks for the input