Hacking your (sticks464) centering hack?

lprag · Joined: 24 Oct 2009 Posts: 4

Hello,

Regarding:

http://www.htmlcodetutorial.com/help/sutra52143.html

Here's your container centering hack:

#menu {
position:relative;
left:50%;
float:left;
}
ul.cssMenu {
position:relative;
text-align:right;
left:-50%;
}

That centering hack works fine with only one problem:

It forces the horizontal scroll bar to always remain all the way to the left.

Thus, if one zooms the page in, there is no way to scroll left to see the zoomed content.

This is a particular problem for me, as I am trying to use your hack as a way to overcome the limitations of "margin: 0 auto;" on keeping divs perfectly centered when using an all em page design.

"margin: 0 auto;" plus a defined width works fine until the page zoom increases enough to force some content outside the screen limit.

At that point, everything shifts left in all browsers except IE which does keep the page completely centered while zooming in on an all em design.

Firefox, Chrome, Safari, and Opera do not but with your hack they will stay completely centered, except that now one cannot scroll left to see the zoomed content.

Any way to hack your hack to overcome this problem?

sticks464 · Joined: 31 Dec 2006 Posts: 2631

You'll have to give me some code to work with so I can see what your doing.

lprag · Joined: 24 Oct 2009 Posts: 4

Hello,

Thanks for the fast reply.

I explain the problem in the 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>centering problem</title>

<style type="text/css">

</style>

</head>

<body>
<div id="container-1">
<div id="container-2">
<div id="container-3">

<div id="container-content">
<p>Velit esse cillum dolore eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate.</p>
<p>Mollit anim id est laborum. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Velit esse cillum dolore lorem ipsum dolor sit amet, in reprehenderit in voluptate.</p>
<p>Cupidatat non proident, eu fugiat nulla pariatur. Qui officia deserunt. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor in reprehenderit in voluptate.</p>
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Quis nostrud exercitation lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi.</p>
<p>Quis nostrud exercitation cupidatat non proident, sed do eiusmod tempor incididunt. Ut enim ad minim veniam, mollit anim id est laborum. Quis nostrud exercitation lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>

<p>In reprehenderit in voluptate excepteur sint occaecat ullamco laboris nisi. Duis aute irure dolor eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, excepteur sint occaecat.</p>
<p>Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sunt in culpa mollit anim id est laborum. Sed do eiusmod tempor incididunt ullamco laboris nisi consectetur adipisicing elit. Eu fugiat nulla pariatur.</p>
<p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, velit esse cillum dolore duis aute irure dolor. Ullamco laboris nisi cupidatat non proident, in reprehenderit in voluptate. Qui officia deserunt sed do eiusmod tempor incididunt ut enim ad minim veniam.</p>
<p>Duis aute irure dolor ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, excepteur sint occaecat in reprehenderit in voluptate. Sed do eiusmod tempor incididunt cupidatat non proident, sunt in culpa. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Cupidatat non proident, ut enim ad minim veniam, consectetur adipisicing elit.</p>
<p>In reprehenderit in voluptate duis aute irure dolor excepteur sint occaecat. Sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Velit esse cillum dolore lorem ipsum dolor sit amet, in reprehenderit in voluptate. Sed do eiusmod tempor incididunt consectetur adipisicing elit. Sed do eiusmod tempor incididunt excepteur sint occaecat cupidatat non proident.Ut aliquip ex ea commodo consequat. Duis aute irure dolor sed do eiusmod tempor incididunt ut enim ad minim veniam. Cupidatat non proident, velit esse cillum dolore quis nostrud exercitation. Lorem ipsum dolor sit amet, excepteur sint occaecat ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt cupidatat non proident, mollit anim id est laborum.</p>
<p>Qui officia deserunt sunt in culpa quis nostrud exercitation. Ullamco laboris nisi. Consectetur adipisicing elit, ut enim ad minim veniam, excepteur sint occaecat. In reprehenderit in voluptate velit esse cillum dolore qui officia deserunt.</p>

<p>Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt sunt in culpa eu fugiat nulla pariatur. Ullamco laboris nisi cupidatat non proident, ut enim ad minim veniam. Qui officia deserunt sed do eiusmod tempor incididunt in reprehenderit in voluptate. Velit esse cillum dolore.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Excepteur sint occaecat quis nostrud exercitation qui officia deserunt. Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p>
<p>Ullamco laboris nisi lorem ipsum dolor sit amet, duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt quis nostrud exercitation excepteur sint occaecat.</p>
</div></div></div></div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2631

The centering hack is not needed for what your doing. There is no need to use four div's just to center text. All you need is auto centering on the container-content div and eliminate the others.
Now if you want to include a horizontal menu inside the container-content div that does not have a known width, then the hack can be used to center that menu, as in this example.