centering problem

**karinne** · Oct 25, 2004, 12:15

i tried to follow Paul's FAQ : How to centre horizontally and vertically?

i got it working in firefox and opera, but not in IE.

http://www.karinnelegault.com/new3/en/

any help would be greatly appreciated.

**Paul O'B** · Oct 25, 2004, 13:20

Hi,

is this what you want or have I got the wrong end of the stick

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Web Design Studio of Karinne Legault</title>
<meta name="Description" content="Web design by -- Karinne Legault" />
<meta name="keywords" content="web design, web site, web creation, karinne legault, karinne, outaouais, canada" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
/*
karinnelegault.com master styles
kl@karinnelegault.com
Updated: Oct 25, 2004
*/
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
 margin: 0;
 padding: 0;
 font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #000;
 text-align: center;
 background:#fff url(http://www.karinnelegault.com/new3/images/layout/bg.jpg) repeat-x 50% 35%;
 min-width:650px;
 min-height:500px;
}
#horizon{
 position:absolute;
 top:50%;
 left:0;
 width:100%;
}
#centerall {
 margin-top:-250px;
 position: relative;
 margin-left: auto;
 margin-right:auto;
 background-color: #f6f8f9;
 width: 650px;
 height: 500px;
 border: 1px solid #dae2e9;
}
</style>
</head>
<body>
<div id="horizon"> 
  <div id="centerall">centre</div>
</div>
</body>
</html>

Paul

**Paul O'B** · Oct 25, 2004, 13:26

I forgot to mention that your layout can be fixed by adding this

Code:

#centervert {
  left:0;
 height: 200px;
}

But if you look at my version above then the page doesn't slide off the left side of the window when resized smaller.

Hope that helps.

Paul

**karinne** · Oct 25, 2004, 17:01

Great! I actually just change the top: 50% to top: 40% in the #horizon.

Thanks a bunch Paul.

User Tag List

Thread: centering problem

Thread Tools

Display

centering problem

Bookmarks

Bookmarks

Posting Permissions