Having contributed to a feature in last month’s Web Designer Magazine on great CSS secrets, we thought that the blog would be a great place to share the tip we came up with for clearing a float container without extra HTML mark up:
If a floated element is nested within a box that has a border or a background colour applied to it, the floated element will not force its container to stretch all the way down (mainly in standards compliant browsers).
To force the container box to enclose the floated div(s), it needs a ‘cleared’ element added after the last floated div. Rather than adding extra HTML mark up such as a clearing div or paragraph we can use CSS.
Using the pseudo-class
:after it’s possible to add content at the end of an element with the following CSS commands:
Sometimes the container will also collapse in Internet Explorer. Unfortunately IE still doesn’t support the
:after pseudo-class yet, so a simple declaration of
height: 1% to the floated containing div will stop it from collapsing.
Microsoft has recently announced that they’ll be pushing Internet Explorer 8 on to users of earlier IE versions through an automatic rollout. As IE8 launched, much of the talk was about increased security and new features for users. Though the new features are welcome and will maybe help IE8 stay up there in an increasingly competitive browser market place, has Microsoft thought enough about usability?
Features are all well and good, but usability of the browser is also crucial. The IE7 interface doesn’t score particularly high in the usability stakes and IE8 uses a very similar interface. In fact Microsoft seems to have made the usability of the interface worse by placing the compatibility view button (which makes the website render as it would in IE7) right next to the refresh button, making it easy to press this by accident and unwittingly causing the website layout to break.
Hardly anyone outside of the web development world is going to understand what this compatibility button actually means or does.
When other online markets have reached a stalemate on price or functionality, then usability can become a key differentiator (if it wasn’t already) and Microsoft really needs to consider this in the browser market. The growing strength of Firefox and the entry of Google Chrome have seen the browser market really hotting up, so maybe Microsoft should look at what will really make consumers want a browser, rather than trying to push it on them automatically!
Don’t let your stylesheet files get out of control – follow these guidelines right from the start and you’ll easily be able to manage and update your CSS files.