based on this example from @Bergi jsfiddle/CH9K8/1321/
the code below work fine:

#center{
display:inline-block;
}

but if I try this don't work in Chrome and Safari

$('#center').css('display','inline-block');

nor

document.getElementById('center').style.display='inline-block';

any solution? thanks.

EDIT ... ok now I understand why you say it work fine. I have tried it in Chrome (v30) and safari v5.1 And not work ... but yes it work In Explorer, Firefox, and Opera. So now the question is ... some solution for Chrome and Safari ?

based on this example from @Bergi jsfiddle/CH9K8/1321/
the code below work fine:

#center{
display:inline-block;
}

but if I try this don't work in Chrome and Safari

$('#center').css('display','inline-block');

nor

document.getElementById('center').style.display='inline-block';

any solution? thanks.

EDIT ... ok now I understand why you say it work fine. I have tried it in Chrome (v30) and safari v5.1 And not work ... but yes it work In Explorer, Firefox, and Opera. So now the question is ... some solution for Chrome and Safari ?

• javascript
• jquery
• css

• Why don't you simply use the CSS? – Bergi Commented Nov 4, 2013 at 0:40
• possible duplicate of Why does jQuery or a DOM method such as `getElementById` not find the element? – Bergi Commented Nov 4, 2013 at 0:40
• Oh, and regarding your fiddle: You're loading Mootools there; have you actually included the jQuery library? – Bergi Commented Nov 4, 2013 at 0:42
• @bergi. Thanks for asking but NOT. The element is found (I tested with other css properties and works) ... The fiddle example is not mine ... I had tried it with jquery – MTK Commented Nov 4, 2013 at 0:48
• 1 @Timo You have to learn css regardless when you want to do styling, no matter whether you set the styles from js or not. – Bergi Commented Apr 5, 2021 at 20:01

3 Answers 3

$('#center').css('display','inline-block');

This works fine as previously stated by PHPglue, (when you actually set the fiddle to use jquery instead of Mootools) the issue with the right div not displaying inline is due to your use of both a float and the display-inline property, they're not really patible with each other.

$('#center').css('display', 'inline-block'); works if you're using jQuery. See: http://jsfiddle/CH9K8/1320/ . Change it to block and back.

Pure JS code to show the use of block-inline:

    withElem = document.querySelector('#withSpace')
    withoutElem = document.querySelector('#withoutSpace')
    btn1 = document.createElement('button')
    btn1.textContent = 'element1'
    btn2 = document.createElement('button')
    btn2.textContent = 'element2'
    btn3 = document.createElement('button')
    btn3.textContent = 'element1'
    btn4 = document.createElement('button')
    btn4.textContent = 'element2'

    spn = document.createElement('span')
    spn.style.display = 'inline-block'
    // Get a spacer of 20px:
    spn.style.width = '20px'
    //Append it to another node
    withElem.append(btn1, spn, btn2)
    withoutElem.append(btn3, btn4)

<div id=withSpace></div><br>
<div id=withoutSpace></div>

: spn.style.width = '20px' //Append it to another node parentElem.appendChild(spn)