Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Cannot get DIV content to center in IE

Posted on 2007-11-14
3
2,172 Views
Last Modified: 2013-11-19
The following code works great in Firefox, with all elements centered on the page, but IE 6 or 7 will not center the contents:

<div id="container" style="text-align:center; width:700px">
    <div id="row1" style="display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        </div>
    </div>
    <div id="row2" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Image ID="Image1" runat="server" ImageUrl="../images/IVM/IVM-Rugged-Ethernet.png" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image2" runat="server" ImageUrl="../images/IVC/IVC.jpg" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image3" runat="server" ImageUrl="../images/IVR/IVR-Angled.png" Width="150px" />
        </div>
    </div>
    <div id="row3" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button3" runat="server" Text="Button" />
        </div>
    </div>
</div>

Basically rows 1 2 and 3 should be centered within the 700px div "container".

What do I need to do to get this to work?
0
Comment
Question by:pwi11
  • 2
3 Comments
 
LVL 3

Expert Comment

by:arichterwork
ID: 20284967
You could do this:
<div id="container" style="text-align:center; width:700px">

<!-- added -->
<center>
<div id="innercontainer" style="width: 450px;">
<!-- /added -->

    <div id="row1" style="display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        </div>
    </div>
    <div id="row2" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Image ID="Image1" runat="server" ImageUrl="../images/IVM/IVM-Rugged-Ethernet.png" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image2" runat="server" ImageUrl="../images/IVC/IVC.jpg" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image3" runat="server" ImageUrl="../images/IVR/IVR-Angled.png" Width="150px" />
        </div>
    </div>
    <div id="row3" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button3" runat="server" Text="Button" />
        </div>
    </div>

<!-- added -->
</div>
</center>
<!-- /added -->

</div>


The "float: left" is what was not allowing the use of "<center>" or "text-align: center" to function properly in IE.
0
 
LVL 3

Accepted Solution

by:
arichterwork earned 500 total points
ID: 20284985
Sorry, forgot to mention:

If you also want the text/buttons to be centered within each 150px div, then you would want to add "text-align:center;" to the innercontainer div, and remove it from the container div for it to look identical in IE and Firefox.
0
 

Author Comment

by:pwi11
ID: 20299354
Thanks arichterwork!!  That did it!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question