Forum Moderators: not2easy
This is trivial to do if using tables but is there a CSS cross browser solution to this?
DIV C {width:500px;}
-----------------------------------------------
¦.............................................¦
¦.............................................¦
¦....-------------------------------------....¦
¦....¦.DIV.A...... ¦.DIV.B...............¦....¦
¦....¦.............¦.....................¦....¦
¦....¦.float:left;.¦...float:left;.......¦....¦
¦....¦.............¦.....................¦....¦
¦....-------------------------------------....¦
¦.............................................¦
¦.............................................¦
-----------------------------------------------
Horizontal:
If you float them, then centering become very tricky, even impossible.
If you make them inline elements (e.g. by using display:inline-block; (legacy IE versions need help: trigger it back to display:inline in a conditional comment)) then they will obey text-align:center settings.
If there is a really good reason to float them, wrap them up in something you make inline and center that.
Vertical:
It is much harder in general to get vertical centering. But you didn;t give info on what you know and don't know vertically.
Display: table-*
Anything a table can, you can do in CSS: display:table-* is all you need.
Few use it as legacy IE ... well is IE as usual and doesn't play along. If you find a workaround for IE, you can use the real thing for compliant browsers.
Horizontal
So, display:inline-block seems to work marvelously in modern browsers, but as you point out, fails to work in IE6 and IE7. Using diaplay:inline isn't an option because then things like borders and padding do not function. I tried wrapping it in a div that is declared display:inline; and that doesn't seem to work.
The reason why I floated them is because I want block level elements that can have border/padding/margins adjacent to one other.
Vertical
Yes..IE is the problem...i'm looking for a cross browser solution for vertical/horizontal that works in IE6+ and FF2+.
To date I am reaching the conclusion that such a CSS solution simply does not exist and that I must use tables.
Was hoping someone had an example that can prove otherwise.
The display-inline needs a trick for legacy IE versions:
SuzyUK has it here: [webmasterworld.com...]
vertically:
The easiest if you can is to "go with the flow" and let the parent stretch as needed.
If that's not possible: absolute positioning with margins set to auto and top and bottom nailed down works in most browsers, even if you do not always have the size of the element (such as for an image).
Setting display to table isn't the same as using tables in the html. you just make elements behave as if they are tables.
