www.webdeveloper.com
Results 1 to 3 of 3

Thread: Perpetual center DIV problems

  1. #1
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

    Angry Perpetual center DIV problems

    I've seen and I know a lot of crossbrowser techniques to center horizontally a block element which has a defined width. I confess I have not found yet a similar (full crossbrowser) solution in case of variable width block elements.

    Problem: crossbrowser CSS center a block element with variable width
    Application:
    1. an outer DIV element, with a defined width and 2 childNodes:
      1. an inner DIV, with a variable width and a variable number of block children;
      2. a textNode.

    Requirements:
    - both outer's childNodes (the inner DIV and the textNode) should be centered relative to their parent (the outer DIV).
    - the inner DIV should not have a certain pre-set width.
    What have I done so far:
    For the textNode, there is no problem. But the positioning of the inner DIV rises some problems because it must have a variable width. Bellow there is my partial solution (tested in FF, Opera, Chrome, Safari):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .outer{
    width:400px;
    border:solid 1px #ff0000;
    text-align:center;
    }
    .inner{
    display:table;
    margin:0 auto;
    height:30px;
    border:solid 1px #ff00ff;
    }
    .inner div{
    float:left;
    width:30px;
    height:30px;
    background:#ccc;
    margin:2px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    	<div class="inner">
    		<div>1</div><div>2</div><div>3</div><div>4</div>
    	</div>	
    	center text
    </div>
    </body>
    </html>
    What do I want?:
    Now, as you can see in the code above, I think I found a simple and elegant solution on using (see blue above) the display:table and margins left/right auto. But, as usual, IE provides no alternative, or at least I was not able to find it so far. I tried various combination between width:auto, min-width (I was to find a solution at least for IE7 only ), text-align, display:inline, display:inline-block ... Nothing, so far.

    My question is: does anybody know a combined (or even a separate one for IE - IE6 and IE7) CSS solution to this problem?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I received a good solution from a friend in another Forum: IE CSS expression(). I intended to avoid javascript solution in this case, so that I forgot completely about the IE's expression().

    I am still curious for a pure CSS solution, but if none, it looks like expression() could be quick solve, something like.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .outer{
    width:400px;
    border:solid 1px #ff0000;
    text-align:center;
    }
    #inner{
    display:table;
    margin:0 auto;
    width:expression(document.getElementById('inner').getElementsByTagName('div').length *(document.getElementById('inner').getElementsByTagName('div')[0].offsetWidth+2*parseInt(document.getElementById('inner').getElementsByTagName('div')[0].currentStyle.marginLeft))+2);/* IE6 correction: +2*/
    
    height:30px;
    border:solid 1px #ff00ff;
    }
    #inner div{
    float:left;
    width:30px;
    height:30px;
    background:#ccc;
    margin:2px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    	<div id="inner">
    		<div>1</div><div>2</div><div>3</div><div>4</div>
    	</div>	
    	center text
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I ended by calling a function, as I need an extra loop. Every thing works OK, except, of course, for IE6
    CSS
    Code:
    #pgn{
    width:expression(findWidth(this)); /*IE hack - js/ie_hack.js*/
    }
    javascript
    Code:
    function findWidth(ul){
    var kids=ul.getElementsByTagName('*'), i=0, k, w=0, margins=4;
    while(k=kids[i++]){
    if(k.nodeName!='A'&&k.nodeName!='SPAN'){continue}
    w=w+k.offsetWidth+margins;
    }
    return w+'px';
    }
    HTML
    Code:
    <!-- BEGIN PAGE NAVIGATION -->
    <div style="width:605px;text-align:center">
    <div class="div_pagination">
    
    <ul class="pagination" id="pgn">
    <li><span class="pagenav">&laquo;&laquo; Start</span></li>
    <li><span class="pagenav">&laquo; Inapoi</span></li>
    <li><span class="pagenav_this"> 1 </span></li>
    <li><a href="/Notebook-uri/pagina-2" class="pagenav_restul">2</a></li>
    <li><a href="/Notebook-uri/pagina-3" class="pagenav_restul">3</a></li>
    <li><a href="/Notebook-uri/pagina-4" class="pagenav_restul">4</a></li>
    
    <li><a href="/Notebook-uri/pagina-2" class="pagenav" title="Inainte"> Inainte &raquo;</a></li>
    <li><a href="/Notebook-uri/pagina-27" class="pagenav" title="Sfarsit"> Sfarsit &raquo;&raquo;</a></li>
    
    </ul>	
    	Rezultate 1 - 20 din 537	
    </div>
    </div>
    <!-- END PAGE NAVIGATION -->
    But when running under IE6, the page stops loading after a second and get stuck. Any idea why IE6 does that?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles