CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
fydelio
fydelio

Reputation: 953

HTML: display: block - but element is still shown as inline

I'm rather new to programming and stackoverflow has been very useful so far. So sorry if this questions might seem a bit simple to some of you, but I really can't figure this one out:

I'm using Bootstrap to develop my page and created a button which works just fine. Just below that button, I want the Facebook-Like & Twitter Button. This is what I'd like. But interestingly, the FB button always shows on the same line (hence left of the BOOTSTRAP BUTTON (that's how i named it in the code). 

<a href="#Meinung" class="btn btn-primary btn-lg pull-right smoothScroll" style="display: block">BOOTSTRAP BUTTON</a>
<div class="fb-like pull-right" data-href="http://www.hafenkran-zuerich.ch" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

As you see, I've set the button's style to: display: block. But still the Facebook Button is shown on the left. I've even tried to set the BOOTSTRAP BUTTON within a , which are by default block elements. But that didn't solve the problem either. Any ideas?

Upvotes: 1

Views: 866

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

Try removing the pull-right class from both the Bootstrap button and Facebook button.

That class is causing both elements to be floated right, which is why they are displayed next to one another.

Here is a Fiddle: http://jsfiddle.net/JkD8g/

If however you need to leave the pull-right class on both elements, you can clear the Bootstrap button's float by applying clear:right or clear:both to the Facebook button.

Here's another Fiddle: http://jsfiddle.net/Hudpz/

Upvotes: 1

Related Questions