Most of us have banged our heads against monitors when there was an issue with the CSS 'float'property. It’s become obvious these days to see most query hits on CSS float property. Since we want columned structure in UI, we have to use 'float' property unless we choose to use tables.
Recently I faced the same issue, but this time the issue was with the mobile website. To fix the issue I used 'display: inline-block;' property and it worked just the way I exppected, except........ IE7(wicked). As usual IE7 prefers eating stuff differently (rather in weird/uncommon way). To educate IE7 about 'inline-block' property I had to add these two properties -
'*display: inline;'
'zoom:1;'
Then I validated this page with W3C validation service and the result was Green! One more advantage of using inline-block is that you don't have to use unnecessary 'clear: both' DIV in your markup, whereas it's must with float property.
A fact to keep in mind: Every time you use ‘display: inline-block;’ property for columned structure, never forget to include ‘vertical-align:top;’ in your CSS, because browsers tend to position the LIs/DIVs/SPANs at the bottom. Also, browsers add some white space after every inline-block element (LI). To fix this issue we need give 'letter-spacing:-4px;' to the UL (parent element), and to LI we need to add 'letter-spacing:0px;'.
Browsers are kind of rivals of CSS float property. To avoid these unexpected issues let's not use ‘float’ property and start using 'display: inline-block'.
Demo: http://jsfiddle.net/3SHc8/
Recently I faced the same issue, but this time the issue was with the mobile website. To fix the issue I used 'display: inline-block;' property and it worked just the way I exppected, except........ IE7(wicked). As usual IE7 prefers eating stuff differently (rather in weird/uncommon way). To educate IE7 about 'inline-block' property I had to add these two properties -
'*display: inline;'
'zoom:1;'
Then I validated this page with W3C validation service and the result was Green! One more advantage of using inline-block is that you don't have to use unnecessary 'clear: both' DIV in your markup, whereas it's must with float property.
A fact to keep in mind: Every time you use ‘display: inline-block;’ property for columned structure, never forget to include ‘vertical-align:top;’ in your CSS, because browsers tend to position the LIs/DIVs/SPANs at the bottom. Also, browsers add some white space after every inline-block element (LI). To fix this issue we need give 'letter-spacing:-4px;' to the UL (parent element), and to LI we need to add 'letter-spacing:0px;'.
Browsers are kind of rivals of CSS float property. To avoid these unexpected issues let's not use ‘float’ property and start using 'display: inline-block'.
Demo: http://jsfiddle.net/3SHc8/
hmm this float kick my head...
ReplyDeleteThanks