CSS Forum

**PeachyJuice** · 05:45 PM

Okay so I'm working on this layout for someone and I ran into a little snag. It works great in FF/Safari but in IE I can't get the page to center vertically and horizontally. I've tried 3 or 4 different ways (found online) and they all move the content around very oddly. I think it's because I have a float inside the .page div. I just need to get this figured out xD

Here's the url of the test page. The css for non-ie browsers isn't important so I won't post it. Here's what I have for IE:

HTML Code:

html,body{height:100%;width:100%;}
*{margin:0; padding:0;}
body{
text-align:center;
	min-height:468px;/* for good browsers*/
	min-width:552px;/* for good browsers*/
font-size:80%;
	
}
#container{
height:1px;
width:100%;
position:relative;
}
.main{	
text-align: center;
	position:absolute;
	height: 468px;
top:50%;
display:block;}
.page{
	width: 59em;
	background:#fff;
	height: 468px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #000;
position:relative;
top:-50%;
}
.left{
float:left;
width:19em;
height:30em;
margin-top:3em;
}
.lefttop{
margin:1em;
padding:10px;
border-right:1px dashed #999999;
height:40%;
}
.leftbot{
padding:10px;
margin:1em;
border-right:1px dashed #999999;
height:30%;
}
.content{
margin:3em 0 1em 18em;
height:30em;
}
.dash{
border-bottom:1px dashed #999999;
margin:1em;
}
.content_top, .content_mid, .content_bot{
padding:1.5em 10px;
}
.content_top{
height:22%;
}
.content_mid{
height:23%;
}
.topfloat{ /*remove height and width once theres an image */
float:left;
border:1px solid black;
margin-right:1em;
}
.imgfloat{
float:left;
margin-right:1em;
text-align:center;
}
.leftfloat{
float:left;
margin-right:1em;
}
h1, h2, h3{
margin:0;
}
.big{
font-size:230%;
font-family:Times New Roman;
}
.right{
text-align:right;
margin:0;
}
ul{padding:0;
list-style-position:inside;}

And here's the html for the page:

HTML 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" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Page 1 Layout</title>
<link rel="stylesheet" href="page1_css.css" type="text/css" />
<!--[if IE]--->
<link rel="stylesheet" href="page1ie_css.css" type="text/css" />
<![endif]--->
	</head>
	<body>
	<div id="container">
	<div class="main" id="main">
<div class="page">
<div class="left">
<div class="lefttop">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pretium nibh a diam. 
<ul>
<li>Curabitur suscipit.</li>
<li>Pellentesque semper.</li>
<li>Aenean malesuada venenatis.</li>
<li>Duis ultricies elementum nunc.</li>
<li>Aliquam pellentesque mattis.</li>
</ul>
Read More ->
</div>
<div class="dash">
</div>
<div class="leftbot">
<h2>Heading</h2>
<img class="leftfloat" src="01.jpg" width="75px" height="140px" />
Vivamus interdum. Integer rutrum molestie enim. Class aptent taciti sociosqu ad<br /><br />
Tel: 0 123 456 789<br /><br />
Another Link -></div>
</div>
<div class="content">
<div class="content_top">
<img src="01.jpg" height="120px" width="140px"  class="topfloat" />
<div><h1>Welcome!</h1>
<h3>This is some subtext</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pretium nibh a diam. Morbi faucibus, est vehicula vehicula ornare
<br /><br />
Learn More >
</div>
</div>

<div class="content_mid">
<h2>Heading Three:</h2>
<div class="imgfloat">
<img src="01.jpg" height="100px" width="112px" /><br />
Image 4</div>
<div class="imgfloat">
<img src="01.jpg" height="100px" width="112px" /><br />
Image 3</div>
<div class="imgfloat">
<img src="01.jpg" height="100px" width="112px" /><br />
Image 2</div>
<div class="imgfloat">
<img src="01.jpg" height="100px" width="112px" /><br />
Image 1</div>
</div>

<div class="content_bot">
<div class="leftfloat">
<img src="01.jpg" height="100px" width="110px" /></div>
<h2>Another Heading</h2><br />
<span class="big">“</span>
Etiam blandit turpis ut eros ullamcorper venenatis. Nam luctus. Mauris leo nunc, viverra quis, laoreet eget, consectetuer eget, risus. Suspendisse potenti.
<span class="big">„</span>
<p class="right">Learn More -></p>

	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

**vangogh** · 06-13-2008, 05:57 PM

I think you went about the centering wrong. That's more than a float inside a div.

Try this sticky thread. There are quite a few ways to center pages in there.

I've never been big on vertical centering, but horizontal centering is actually pretty easy.

You wrap one div around your content, specify the width of that wrapper div, and set the left and right margin to auto. You'll also need to use a valid doctype.

<body>
<div id="wrapper">
all your code here
</div>
</body>

div#wrapper {width:790px; margin: 0 auto}

That'll center things horizontally. The width of course is up to you and the 0 margin on the top and bottom is probably not what you want if you're after vertical centering.

**PeachyJuice** · 06-13-2008, 06:23 PM

I can horizontally center fine. My client wants the page vertically centered. The stickies don't help because they make the page go REALLY funky (as I've said, I've tried quite a few different methods and none worked).

**LadynRed** · 06-13-2008, 08:44 PM

In IE6 your #container isn't 'wrapping' around the rest of your page, so it's putting it waaay out to the right and off the top of the screen. Did you clear your floats ?

When I set #main to position:relative instead of absolute, the content at least comes down from the top and everything centered horizontally. That's a starting point.

**PeachyJuice** · 06-14-2008, 10:40 AM

Again, horizontal isn't the problem. That was one of the 4 codes that seemed to work fine when I viewed the test page in IE, but when applied to my code made it do very funky things. Here's a list of methods that I've tried:
One - The test page is messed up in IE7, and my div with this just stays at the top.
Two - This uses margins and positioning. It made only the bottom left corner of the content visible.
Three - Made only the bottom half of the content box visible. The rest was above the start of the page.
Four - Very similar to the first code, except that it worked when I viewed it in IE. I use this exact code for FF and Safari and it works great. It keeps the div right at the top of the page and doesn't center it at all.
Five - This is the method that I'm currently showing. It moves everything oddly around.

I've tried lots of things, and with the code I'd like to use (yes even with cleared floats) it doesn't work. So what do I do? I know it can be done, I just don't know how right now.

**webcosmo** · 06-14-2008, 11:08 AM

Put padding-left: auto;padding-right: auto; on the container css.

**LadynRed** · 06-14-2008, 11:32 AM

That's just not the answer, you need to read the rest of the thread webcosmo.

Peachy, I just looked at it in IE7 on my laptop, and it IS centering in both directions.

I'll have to download your page and test it myself to see if we can find a solution.

**PeachyJuice** · 11:35 AM

Lady- Really? On my other computer (this mac doesn't have IE) it goes to the top of the page.

**LadynRed** · 06-14-2008, 12:03 PM

I found another method, it's been tested down to IE 5 mac, works perfectly in my IE7 and Firefox.

http://d-graff.de/fricca/center.html

**PeachyJuice** · 12:50 PM

Works great once I realized I had to change my HTML xD Thanks!

**LadynRed** · 06-14-2008, 12:54 PM

Kewl.. you're welcome