0

I have the following CSS. This works fine but not in IE and Opera.

#content
{
    position: absolute;
    left: 0;
    right: 0;
    min-width: 750px;
    max-width: 1100px;
    min-height: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    top: 150px;
}
2
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by Dandello
0

You do realize you have two min-widths in there, don't you? And without a page to look at, it's hard to diagnose the problem. Like exactly what isn't working?

0

Thanks Dandello. I have corrected the error you pointed out and it works fine in IE but it doesn't work in Opera. What I'm trying to do is to center the DIV with id = 'container'.
HTML

<!DOCTYPE html>
<head>
	<title>HOME PAGE</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<div id="head"></div>

<div id="container"></div>
</body>
</html>

and my CSS

html, body
{
   margin: 0;
   padding: 0;
}

body
{
    position: relative;
    min-height: 900px;
    background-color: #C6C6AE;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana;
}

#head 
{
    height: 250px;
    
}

#container
{
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    min-width: 775px;
    max-width: 1100px;
    min-height: 1000px;
    border: 1px solid #FFF;
    margin-left: auto;
    margin-right: auto;
}
0

Generally, the body doesn't need a position attribute since it automatically takes up all (or at least most) of the browser window. (But that's just an observation.)

What I think is happening is while the other browsers are using the two margins the center the div (and ignoring the left:0 and right:0 since the margin attributes are being applied later), Opera is anchoring it due to the position:absolute; left:0. As far as it's concerned, the margins are contradictory to the position attribute and position wins.

My bet is if you comment out the left:0 and right:0, it will behave.

Edited by Dandello: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.