While working on a few websites this week I came across two really useful techniques.
Two Column Float Variable Widths
The first was a simple two column layout using float left on both div's without any width set. This proved a bit of a challenge for both div's wanted to sit underneath eachother or the second column would wrap under neath the first div.
Our solution was to use float left on the first div with the second div set with no float but but using display:table instead. This worked perfectly for firefox and other browsers apart from IE... For IE we just had to add the float:left property in a conditional css hack i.e. * html #div { float:left }. This allowed us to achive two columns with flexible widths, see the image below.
Backslash IE hack
The second little niffty css hack I came across was similar to the underscore IE hack i.e. _height:100px;
Using two backslashes (//) instead of the underscore works across all IE's.
IE ignores the two backslashes as where all other browsers see this as comments. Genius!!
Currently rated 4.5 by 2 people
- Currently 4.5/5 Stars.
- 1
- 2
- 3
- 4
- 5