Home/ Questions/Q 8900111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:01:35+00:00

I have a little problem in centering elements inside a div. Although the css

  • 0

I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.

Say I have a div with id=”contactus” and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:

<div id="contactus">
  <h2>CONTACTS</h2>
</div>

#contactus {
    margin-top: 20px;
    height: 308px; /*2px for the border on both sides*/
    width: 248px; /*2px for the border on both sides*/
    background-color: #F0F0F0;
    border: 1px solid #A9A9A9;
}

#contactus h2 {
    margin:0 auto 0 auto;
    text-align: center;
    font-family:arial,sans-serif;
    padding-top: 10px;
    /*this is for the underline after the heading*/
    width:80%;
    border-bottom:1px solid gray;
}

The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?

Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    it might be because of doctype Check that you have a valid doctype

    try

    <!DOCTYPE html>
    • 0