Centering a Content wrap

Hi all,

I’ve read all the posts about screen resolution and fixed versus fluid sites. I’m using a content wrap which I’m centering using margin:auto, which ensures the content is centred on screens regardless of the viewport size. This works well on all screens that I view it on. However, although it solves the width problem, it does not deal with the varied heights.

Is there a command that will centre a wrap top-to-bottom within the viewport please?

Thanks

If I’m not mistaken.

magin can be used several ways. such as

margin: 11px, 24px; (11px would be top and bottom, 24px would be left and right)

If you would want just the top and bottom centered then why not try

margin: 0px, auto; (This creates no margin for the left and right and centers the top and bottom)

Usually you set things a fixed distance from the top of the body. If it is a resolution issue, this seems to be the normal way I see people dealing with it.

I haven’t tried it, but maybe you could make a 100% height table and vertically align it.

Otherwise you you could write something in a script, I believe. JS can access the document.documentElement.*clientHeight , IIRC Maybe someone else has a better idea, though.

Thanks guys. The problem is that if I set the wrap a fixed distance from the top, it doesn’t solve my problem of being centred top and bottom in different sized browsers and viewports. It just lowers the wrap in the browser I’m using at the time.

I couldn’t make your piece of code work Barry. I’m already using margin:auto to centre the screen left and right, (with position:relative, which seems to work.) When I tried margin: 0px, auto; as you suggested, for some reason it fixed the margins again. Also my understanding was that the first figure was for the top and bottom margins, and the second (ie the auto in this case) was for left and right, positioning. Is this not right?

Bob, I’m afraid JS is too advanced for me right now! But nice to think about!

Hi 13adger,

You problem is quite common and Paul O’Brien has solutions for getting in the vertical centre among other cases.

As you seems to know both the width and the height of the content there is a simplier method of his . It is to place a floated “spacer” div to take 50% height (from the html-body 100%) and let the cleared (so it can’t slide under) content div come up by half its known height.

E.g:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
html,
body{
	margin:0;
	padding:0;
	height:100%;
}

#spacer{
	float:left;
	margin-bottom:-15em;
	width:100%;
	height:50%;
}
#content{
	clear:left;
	margin:0 auto;
	width:600px;
	height:30em;
	background:#fc0;
}
</style>
</head>
<body>

<div id="spacer"></div>
<div id="content">
	Content
</div>

</body>
</html>

Thanks so much Erik, I’ll certainly give that a try!