Home/ Questions/Q 1006633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:29:30+00:00

I have an html page : <html> <head> <title> All Time Set Window </title>

  • 0

I have an html page :

<html>
<head>
<title>
All Time Set Window
</title>
</head>
<body>
<div align="center" style="width:1000px; height:100%; margin-left:auto; margin-right:auto;">
    <div style="width:100%; height:20%; background-color:#F8E0E0; float:top;">
        <div align="center">This is Header</div>
    </div>
    <div style="width:100%; height:60%; background-color:#F5F6CE;">
        <div align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
        <div align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
    </div>
    <div style="width:100%; height:20%; float:bottom; background-color:#F8E0E0;">
        <div align="center">This is Footer</div>
    </div>
</div>
</body>
</html>

I have used Margin-left & Margin-right to auto for taking div to center. This is working in Mozilla & not in Explorer. What is solution for the same.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The correct solution (according to the spec) is the one you have. You should set both margins to auto to center the block.

    But as usual, explorer does not play by the rules. To make it center a block you have to set text-align of the parent element to center. Since you probably don’t want all the text in your element itself to be centered as well, you’ll have to negate the behaviour again by setting text-align to left on that one.

    <html>
  <head>
    <title>All Time Set Window</title>
  </head>
  <body>
    <div style="text-align:center">
      <div align="center" style="width:1000px; height:100%; margin-left:auto; margin-right:auto; text-align:left">
        <div style="width:100%; height:20%; background-color:#F8E0E0; float:top;">
          <div align="center">This is Header</div>
        </div>
        <div style="width:100%; height:60%; background-color:#F5F6CE;">
          <div align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
          <div align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
        </div>
        <div style="width:100%; height:20%; float:bottom; background-color:#F8E0E0;">
          <div align="center">This is Footer</div>
        </div>
      </div>
    </div>
  </body>
</html>
    • 0