2

I have a class defined like this:

<div class="float-left inline">

where:

.inline {
   display: inline;
}
.float-left {
   float: left;
}

Can someone tell me if I need to use both float: left; and display: inline;. I am bit confused as they both seem to do the same thing.

Charles
  • 50,943
  • 13
  • 104
  • 142
Alan2
  • 23,493
  • 79
  • 256
  • 450
  • no float means you are forcing DOM to align to the floated position.... – Dipesh Parmar Sep 05 '13 at 09:01
  • float has problems of clearing, you need a __clearfix__ or use __overflow__ tricks that usually cause problems (eg shadows). you should use __inline-block__ which is the best solution usually – Fez Vrasta Sep 05 '13 at 09:20

5 Answers5

2

display:inline means a element may be placed next to other items.

This is different from block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Community
  • 1
  • 1
Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
  • So do you mean for this case I could just use "display: inline" ? – Alan2 Sep 05 '13 at 09:14
  • Yes I would like to make it display to the left. I am just trying to find out if I can use only one and not the other. – Alan2 Sep 05 '13 at 09:20
1

With display you are changing the display type of the element.

With float you are setting position for that element.

Here is an answer with practical explanation why would you prefer float for positioning.

Community
  • 1
  • 1
Mariyan
  • 664
  • 6
  • 20
1

Although the two work on different aspects of the element they can be used on conjunction. For example changing an Anchor to display:block and float:left will work and allows you to set a height and width on it.

Taking a div and applying display:inline and floating it wouldn't make much sense no.

Jacques
  • 6,936
  • 8
  • 43
  • 102
  • Hi, You said "wouldn't make much sense no" so do you mean it would be better for me just to use "display: inline" ? – Alan2 Sep 05 '13 at 09:12
  • No not quite. Use inline if you have a have an element that should normally be a block element but you want it to display like an inline element. Float on the other hand takes elements 'out' of the normal flow i.e. you could have an image in the middle of a paragraph of text but floating it 'right' would push it to the right of the container allowing the text to flow around it's left. – Jacques Sep 05 '13 at 12:59
1

Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float

Inline Elements

Floated Elements

Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.

Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.

Floated Example

While display: inline; won't

Inline Example

See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.

Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    @mr-alien - I'm sorry. can you check the wording in your conclusion. Did you mean to say "Even if you do not use" ? – Alan2 Sep 05 '13 at 09:38
0

Not redundant. Actually, I meet a problem when I set a float: right with an element and it works on chrome not works in IE. Specifically, on IE, the content of element overflows the boundary of the container. So, I use display: inline and float:right together, it works very well on chrome and IE 11.

Zhongxu Huang
  • 11
  • 1
  • 2