Home » Microsoft TechnologiesRSS

display:inline-block

Am I wasting my time trying to get divs to render across the display with an assigned width?  I read that if you make a div inline, you cannot assign a width.  Then I read that inline-block will allow that.  But IE does not appear to support inline-block.  On Windows 7, IE renders two inline-block divs vertically. In chrome, they render horizontally. Is there a sensible explanation for this?

( how do you determine the version of IE you are running? )

thanks,

div

 

 

style="display:inline-block; width:10em; background:red;">abc</div>

<

 

 

divstyle="display:inline-block; width:10em; background:blue;">efg</div>

 

 

2 Answers Found

 

Answer 1

Replace inline-block with inline  and you will get what you want.

<div style='display:inline;' />

 

Also check this article for more information on inlines:

http://colinaarts.com/articles/inline-block-and-you/

 

To determine  the version  of IE - you can use the following javascript code:

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

 

Answer 2

Replace inline-block with inline  and you will get what you want.

<div style='display:inline;' />


Ali Hamdar (alihamdar.com)

What am I missing here? In IE8, I cannot get a series of divs  to render  across the page, each with an assigned  width. ( without using float ).

display:inline ignores the assigned width  of the div. The following blocks render side by side, but the width is the width of the text contents:

<h1>Using inline:</h1>

<

 

 

divstyle="display:inline; width:10em; background:red;">abc</div>

<

 

 

divstyle="display:inline; width:10em; background:blue;">efg</div>


display:inline-block renders  the way I want it to in chrome. A fixed width and the divs are horizontally side by size.  In IE8, the divs display  one under the other.

<

 

 

h1>Using inline-block:</h1>

<

 

 

divstyle="display:inline-block; width:10em; background:red;">abc</div>

<

 

 

divstyle="display:inline-block; width:10em; background:blue;">efg</div>

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter