Question

I have 5 menu buttons to be displayed in a line one after the other.

I put float:left in the style of the button’s class.

That did the job for me.

Take a look at this.
If I change display:inline to float:left, it doesn’t line up the 2 paragraphs.
Which is the right approach to this?

EDIT:I found that it works fine in JS Fiddle but not on w3schools. So that creates some confusion.

Answer 1

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

div { white-space: nowrap }
p { display: inline }

This will keep the paragraphs allways side by side. Example

If you need to set the paragraphs to display: inline-block, be shure to change these elements to elements that are inline-elements by default, to get it work in older IEs.