1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Centering block-level elements in IE

Discussion in 'CSS' started by J.D., Dec 30, 2004.

0
  1. #1
    Anybody who tried to use the proper CSS way to center a block element (e.g. div, table, etc) in IE, knows - it's pain. As it turns out IE is capable to do the right thing. Here's how. Enjoy.

    If you need to center a block level element like this:

    <div style="width: 60%;">some text</div>
    Code (markup):
    , the CSS way is to make left/right margins auto. For example:

    <div style="width: 60%; margin: 1em auto;">some text</div>
    Code (markup):
    Unlike FireFox and Opera, IE by default ignores this rule and renders the div left-aligned. If you use any centering tricks, like this one:

    <div style="text-align: center;">
<div style="width: 60%;">some text</div>
</div>
    Code (markup):
    , the inner div will be centered, but so will be the text inside (text-align is inheritable).

    A simple fix that makes IE follow the pack is to add the full DOCTYPE declaration to the document. For example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...
    Code (markup):
    The DTD reference must be included in DOCTYPE for this to work. That's all - no more browser-specific centering. Here's the full test for those who was patient enough to read to this point and want to give it a try:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
</head>
<body>
<div style="width: 60%; border: 1px solid red; margin: 1em auto;">some text</div>
</body>
</html>
    Code (markup):
    J.D.
     
    J.D., Dec 30, 2004 IP
  2. relaxzoolander

    relaxzoolander Peon

    Messages:
    141
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #2
    nice.

    i use this css for centering.
    note that this uses a fixed size 'sitebase' div.
    this div contains the entire site.
    the div is offset by half its width and height from the centercenter div.

    .centercenter {
    left: 50%;
    top: 50%;
    position: absolute;
    }
    .sitebase {
    left: -350px;
    top: -200px;
    width: 700px;
    height: 400px;
    background-color: #F2EEE5;
    position: absolute;
    }

    this is the the div structure.

    <div class="centercenter">
    <div class="sitebase">some text.<div>
    </div>

    its at work at this pharmacy bag marketing site.

    whats interesting about it is that if you collapse your window to a very small size...the sites center still stays in the center of the tiny sized window.
    this could be useful for someone.

    :)
     
    relaxzoolander, Jan 25, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Neat. The only problem with this method is that when you resize your window, there's absolutely no way to see the top of HTML (because the left and top of the inside box are negative).

    BTW, your site comes up as an almost blank screen if flash is not installed/enabled in the browser.

    J.D.
     
    J.D., Jan 25, 2005 IP
  4. relaxzoolander

    relaxzoolander Peon

    Messages:
    141
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ...so i guess 2% of the visitors miss out.
    i can live with that.
    :)
     
    relaxzoolander, Jan 25, 2005 IP
  5. relaxzoolander

    relaxzoolander Peon

    Messages:
    141
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #5
    the size is designed for 800 x 600.
    if someone wants to make their window impractically small...
    ...then thats their problem.
    most sites dont function under the conditions you describe.
    thanks for sharing.
    :)
     
    relaxzoolander, Jan 25, 2005 IP