Centered div, moves when browser scroll bar appears

Dolphin123

12-07-2005, 10:23 AM

or something like that. Don;t know what to search for on this one.

Anyway. The basic problem is I would like to create a center aligned main div. With this code that is possible, however, when the content in the center_content div runs longer than the page, the browser scrollbar pushes the global div to the left. :rolleyes:

How do I fix this? I want the the website to be centered, but not to frigging jump :eek: if the content happens to be longer. Want to stay away from scrollable divs. Cheers :)

HTML

<!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>
</head>

<body>
<div id="global">
<div id="banner"></div>
<div id="centercontent"></div>
</div>
</body>
</html>

CSS

body {
font:12px/1.2 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin:0px 0px 0px 0px;
padding:0px;
background:#FFF;
}

#global {
margin-left:auto; margin-right: auto;
width:500px;
text-align: left;
}

#banner {
margin-left:0px;
height:50px;
background-color:#fff;
}

#centercontent {
margin-top: 0px;
width:600px;height:90%;
background-color:#fff;
}

Span

12-07-2005, 01:17 PM

The only fix would be to somehow give a min-height to your global div so that there always is a scrollbar.

On the other hand, not many users will notice it.

mark87

12-07-2005, 01:21 PM

Funnily enough I bookmarked this page the other day -

http://www.communitymx.com/content/article.cfm?cid=528A0

Dolphin123

12-07-2005, 03:42 PM

Funnily enough I bookmarked this page the other day -

http://www.communitymx.com/content/a....cfm?cid=528A0

Thanx, that's what I was looking for. :thumbsup:

Although the unsightely scrollbar on my opening page. :(

It is better than it was though. :-) and will allow me to build the rest of the site. Yeah tried positioning absolute, fixed.
Could run the scrollbar on the center div, but don't think people will enjoy that too much.

The updated css would then be:

body {
font:12px/1.2 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin:0px 0px 0px 0px;
padding:0px;
background:#FFF;
}

html { min-height: 100%; margin-bottom: 1px; }

#global {
margin-left:auto; margin-right: auto;
width:500px;
text-align: left;
}

#banner {
margin-left:0px;
height:50px;
background-color:#fff;
}

#centercontent {
margin-top: 0px;
width:600px;height:90%;
background-color:#fff;
}