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
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.
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.