Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manchester, England
    Posts
    206
    Thanks
    33
    Thanked 2 Times in 2 Posts

    css float vs display

    Could someone please tell me what the difference is between float:left and display:inline-block

    When should I use float:left and when should I use display:inline-block

    I am trying to create an image gallery of thumbnail images to display the larger images in lightbox.

    Help much appreciated

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    these are not interchangeable... this is like comparing tacos to toiletries... you may use more toiletries because you ate tacos, but you cannot eat a toiletry nor can you clean yourself with a taco...

    display is how it is displayed... float is how it moves on the page

    display
    float

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by alykins View Post
    these are not interchangeable... this is like comparing tacos to toiletries... you may use more toiletries because you ate tacos, but you cannot eat a toiletry nor can you clean yourself with a taco...
    We know what's on your mind today.

    OT: Floats move elements out of the natural flow. Inline-blocks are within the normal flow. Both are adequate techniques for what you want to achieve, but remember: inline-block will respect whitespace between elements.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by chartwise View Post
    Could someone please tell me what the difference is between float:left and display:inline-block

    When should I use float:left and when should I use display:inline-block

    I am trying to create an image gallery of thumbnail images to display the larger images in lightbox.

    Help much appreciated

    Float:left .... If total width of any element is less than 100% and we define float:left property to it. Then it will allow other elements to float after it in same line.

    For more details see http://www.w3schools.com/css/css_float.asp link




    Display:inline-block: .... for this see http://www.w3schools.com/cssref/pr_class_display.asp link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •