SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: display

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    display

    when you have a very simple product1 and product2 next to each other inside a content wrapper what is the proper way to code it?

    display: inline; float:left;

    or

    display:block; float: left / right

    I'm a little confused as to when to block or inline

    many thanks

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Are they images? If so they will line up with each other all by themselves as images are display inline. If they are divs then the easiest way is to just float them left.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    I'm a little confused as to when to block or inline

    many thanks
    If you float them next to each other then you don't need display:block because floats generate a "block box" by default. display:inline is however often added to floats to fix an IE6 double margin bug and is a nonsense fix that just happens to fix the double margin bug for no valid reason. In IE6 floats that have a side edge adjacent to the containing block will have any margins on that side doubled in error. Adding display:inline will fix this and won't harm anyone else.

    If you mean that without using floats you want to know when to use display:inline or block the you would use display:inline if for instance you wanted two paragraphs to run together on the same line. You would add display:inline to b oth of them. However, you could not really set two divs to be display:inline if they hold other block content as it will have no real effect (except it might break in ie6). If they were just two divs with a few words in then then you could make them both display:inline and display on the same line .

    You can find an old article on the subject here.


Bookmarks

Posting Permissions

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