0

In this example I would be using 2 DIVs

<div>
    <div class="element"></div>
    <div class="element"></div>
</div>

With CSS

.element { float: left; }

Okay so the above is one method of displaying the blocks as inline. I recently came across another method:

<div>
    <div class="element"></div>
    <div class="element"></div>
</div>

.element { display: inline-block; }

Now the above also displays the blocks as inline.

Although, The First method would have another thing to worry about, i.e. When you use float, it disturbs the normal flow of the content.

So I wanted to know, Which of the above method is the best way to achieve an inline display? And if its the second method, then does that mean I should not use the first one?

Uzair Hayat
  • 518
  • 1
  • 8
  • 21
  • 4
    possible duplicate of [**float:left; vs display:inline; vs display:inline-block; vs display:table-cell;**](http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell) and [**Drawback of CSS: display:inline-block vs float:left**](http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft) – Fahad Hasan Oct 31 '14 at 03:18
  • `display:flex` is the best. :) – Marwelln Oct 31 '14 at 07:16

3 Answers3

1

"display: inline-block;" is best method to achieve inline display accepted.

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

Additionally older version of Firefox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

As per my knowledge, the best way to get a cross-browser "display:inline-block"

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

but "float:left" is also useful when you don't want blocks and you want it to align left

Prateek
  • 4,220
  • 1
  • 17
  • 22
R.sandeep
  • 221
  • 1
  • 2
  • 8
1

display:inline-block is the best way but keep in mind that when you are using display:inline-block, there would be some cross browser issues, the divs may display a little bit differently in various browsers such as some maybe aligned top while in other browsers it may be alignment bottom. A simple way to fix this is by setting the vertical-alignment

Benefit of using display:inline-block is that you can have your divs in the centre. If you want too of your divs to be displayed in the centre of the pages then this can be achieve by using display:inline-block and in the parent div you have to add text-align:centre. This cannot be achieved with floating and you can save those extra padding from the side which you will add to make them appear in the center.

Float:left has its benefits as well and should be used more then inline block, whenever and wherever needed

Muhammad Ameen Sheikh
  • 412
  • 2
  • 4
  • 14
0

  • You can use both if you give display: inline-block, the div will be placed next to each other,

  • And vice versa for a block element if we use float: left, until we specify width it does not place next to each other.

stanze
  • 2,456
  • 10
  • 13