Although there are countless questions addressing this particular issue, allow me to provide more details:
The Dilemma
The situation is as follows:
aside {
display: inline-block;
}
section {
display: inline-block;
margin-left: 2em;
}
Here, the element aside should be displayed on the left and section on the right. The entire form housing these blocks is meant to be centered. While this setup functions correctly in Firefox and chrome, it fails to display properly in IE8 (no surprises here...). In IE8, both blocks are stacked instead of appearing side by side (with aside overlapping section, to be exact).
The Query
How can I get inline-block to function in IE8?
My Attempts
display: inline-block;
*display: inline;
*zoom: 1;
This workaround is intended for IE7 and lower versions, and does not apply to IE8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or
<!DOCTYPE html>
demonstrated no discernible effect at all.
I am reluctant to resort to using float: left as it defeats the purpose of maintaining the form centered..