Member Avatar for cossay

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
  • 145 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

This is a classic cross‑browser quirk: ’s absolutely positioned container relied on the left/right + auto‑margins trick, which some engines handle differently. As suggested, removing the left/right constraints can fix Opera — but there are two more reliable, cross‑browser patterns to use instead.

One reliable approach for an absolutely positioned box is to center it by shifting from 50% and pulling it back with a transform. It does not depend on how margins are interpreted and works regardless of the element’s width constraints:

/* absolute centering (robust across browsers) */
#container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* set top as needed; use min-width / max-width values you need */
}

A layout‑friendlier alternative is to take the element out of absolute positioning and center it with auto margins. Use a percentage width (or width:100%) together with max/min widths so it remains responsive and centered without absolute rules:

/* center in the normal flow using margins */
#container {
  margin: 20px auto 0;
  width: 100%;
  max-width: /* desired max width */;
  min-width: /* desired min width */;
  /* drop absolute positioning unless you really need it */
}

Troubleshooting notes: if commenting out left/right immediately fixes Opera, the problem was the position/margin conflict. If you must support very old browsers, add vendor prefixes for transforms as a fallback. Also verify the page is in standards mode and check ancestor elements for transforms or positioning that can change how an absolutely positioned child is laid out. The left:50% + translate approach is generally the simplest, most predictable fix for cross‑browser absolute centering.

Recommended Answers

All 3 Replies

Member Avatar for Dandello

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?

Member Avatar for cossay

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;
}
Member Avatar for Dandello

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.