Solved

Cannot get DIV content to center in IE

Posted on 2007-11-14
3
2,173 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
[X]
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
  • 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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

756 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