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
an outer DIV element, with a defined width and 2 childNodes:
an inner DIV, with a variable width and a variable number of block children;
- 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):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
border:solid 1px #ff0000;
border:solid 1px #ff00ff;
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?