How to center a group of DIV's on a page?

Discussion in 'HTML' started by roel.schreurs@gmail.com, Oct 10, 2005.

  1. Guest

    Hi All,

    I need to build a page with an absolute total width. Three columnar
    sections must be in there. These columns themselves must be capable of
    containing mark-up themselves.
    I have been testing with IE6.0, but I would like to be as generic as
    possible, or, rather conforming the HTML 4.01 specification.
    Also, the content need to be centered in the browser. I know how to do
    this using a table, but I am supposed to use that element.
    I have been trying to achieve this using the DIV element, but got only
    as far as a scalable page with margins. Note that the differences are
    made clear when you modify the width of the browser window. Below some
    very simple examples are shown. Could anybody help me there?

    TABLE test with absolute widths. This is how it should look like.
    <html>
    <head>
    <title>
    TABLE test with absolute widths
    </title>
    </head>
    <body>
    <table border="0" align="center">
    <tr>
    <td width="100px" style="background:red">
    LEFT
    </td>
    <td width="400px" style="background:yellow">
    MIDDLE
    </td>
    <td width="100px" style="background:green">
    RIGHT
    </td>
    </tr>
    </table>
    </body>
    </html>

    DIV test with relative widths. This a variant I can get to work, but
    not exactly what it should look like.
    <html>
    <head>
    <title>
    DIV test with relative widths
    </title>
    </head>
    <body>
    <div style="background:blue; margin-left: 20%; margin-right: 20%;">
    <div style="background:red; float:left; width=10%">
    LEFT
    </div>
    <div style="background:yellow; float:left; width=40%">
    MIDDLE
    </div>
    <div style="background:green; float:left; width=10%">
    RIGHT
    </div>
    </div>
    </body>
    </html>

    DIV test with absolute widths; not working properly. The content keeps
    left aligned.
    <html>
    <head>
    <title>
    DIV test with absolute widths; not working properly
    </title>
    </head>
    <body>
    <div style="background:blue; margin-left:auto; margin-right:auto;
    width=600px">
    <div style="background:red; float:left; width=100px">
    LEFT
    </div>
    <div style="background:yellow; float:left; width=400px">
    MIDDLE
    </div>
    <div style="background:green; float:left; width=100px">
    RIGHT
    </div>
    </div>
    </body>
    </html>
    , Oct 10, 2005
    #1
    1. Advertising

  2. sagejoshua Guest

    On 10 Oct 2005 06:55:02 -0700, wrote:


    >DIV test with absolute widths; not working properly. The content keeps
    >left aligned.



    > <div style="background:blue; margin-left:auto; margin-right:auto;
    >width=600px">
    > <div style="background:red; float:left; width=100px">
    > LEFT
    > </div>
    > <div style="background:yellow; float:left; width=400px">
    > MIDDLE
    > </div>
    > <div style="background:green; float:left; width=100px">
    > RIGHT
    > </div>
    > </div>
    > </body>
    ></html>


    You've got the right idea with this one. You need a container div.
    Problem is that auto margins don't work in all broswers. A great (and
    suprisingly interoperable - even works in netscape 4.7) hack is using
    negative margins. For example, for your container div of 600px, use
    the following css:

    #container {
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    }

    What that does is align the left edge at exactly the middle of the
    page, and then move it 300px pixels left (via the negative margin),
    and viola! you've got centered content.

    Good luck,
    -josh
    sagejoshua, Oct 10, 2005
    #2
    1. Advertising

  3. On 10/10/2005 14:55, wrote:

    [snip]

    > I have been testing with IE6.0 [...]


    That's generally a non-starter right there, especially if you're set on
    conforming to HTML 4.01 and using CSS. You would be better off starting
    with a conforming user agent like Opera or Firefox. Later, go back to IE
    and fix any of its rendering bugs.

    [snipped markup]

    It's preferable that you post a URL to examples, rather than posting
    code. Anyway, if you fix your CSS, your immediate problems go away. You
    cannot expect

    width=10%

    to work. Replace the equals with a colon, just like with all of the
    other properties.

    Remember not to use in-line styles in your markup, and specify the
    background and color properties in pairs. Finally, if your content is
    based around text, it's better to use em rather than px units.

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
    Michael Winter, Oct 10, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ben Amada

    Replacement for <div align="center">

    Ben Amada, Nov 30, 2005, in forum: ASP .Net
    Replies:
    11
    Views:
    16,253
    Ben Amada
    Dec 1, 2005
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    726
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    177
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    297
    Martin Honnen
    Jun 26, 2005
  5. Gernot Frisch

    center div over another div

    Gernot Frisch, Mar 16, 2006, in forum: Javascript
    Replies:
    1
    Views:
    170
    Randy Webb
    Mar 16, 2006
Loading...

Share This Page