Overflow hidden (CSS) - Totally mad as a fish

Anyone who thinks cascading style sheets are what you get when the doors of a laundry delivery van fly open en route to a posh hotel may want to skip this blog.

One of the reasons that so many people stick width fixed-width layouts is that some things, even simple things, can be so damn difficult with fluid layouts. When you don't define everything in pixels, you need to know some tricks to get things to behave themselves.

The reason I'm writing this blog is that I've just discovered one of those tricks, and it turns out to be the same trick that is used for a completely different problem. It is the multi-talented property "overflow : hidden".

Hidden Content


Now the obvious reason to set "overflow : hidden" is when you have a fixed height div and don't want any surplus content to leak out the bottom. I'm sure many people think that's all it does.

Visible Content


But have you ever created a div with no fixed height and stuck an image in the bottom which is shifted down by a relative offset? (come on, you must have done). The height of the div is calculated on the unshifted layout, so as the image shifts it gets cut off at the bottom - how stupid is that?

The trick here is to use "overflow : hidden". Strangely, rather than hiding anything it actually makes the div bigger so nothing is hidden. I spent a lot of time chewing my thinking-pencil when I discovered that. (that's not a euphemism, btw, I chew things when I'm thinking).


Side-by-side

More recently I was trying to make two div sit side by side. The left hand div would have a fixed width, and the other would fill the remaining width of the page. How hard could it be?



<div class='leftpanel'></div>
<div class='rightpanel'></div>

 This is what I was after...

The red div is fixed width and set to "float : left", the blue div is fluid, it has no dimensions defined. Sadly, this is what I got (I've made the blue div slightly transparent to show what is happening).

Interestingly, the text understood what was required, to some extent - it stopped when it got to the red div, but the div itself followed its natural instincts and made itself as wide as possible (if I hadn't made the blue div partly transparent, you would not see the red div at all).

No combination of position, display, or margin settings would make the divs behave. I couldn't make the blue div "display : block", or it would drop below the red div and remain full width. If I made it an inline-block, it shrunk to it's minimum width. (chew, chew...)

So what was the answer? Strangely,  "overflow : hidden".

It seems that by hiding the overflow, the div suddenly sees the floating div and decides not to tred on it. So again, it doesn't hide overflowing content, it changes the size of the div to fit the content, in this case making it behave like a block that respects the floating div. Exactly what I was after.

So, in summary...


When a div has a fixed height, "overflow : hidden" will hide any overflowing content.

When a div has no fixed height and shifted content wants to hide below the bottom of a div, "overflow : hidden" will expand the div downwards.

When a div is next to a floated object and wants to occupy the full width of the parent object, "overflow : hidden" will stop it expanding over the floated object.


I'm almost tempted to say that whenever you don't define the height of a div, set "overflow : hidden". It doesn't actually hide content, it just makes the div behave itself. Wonder why it doesn't do that without being told?

Note to self - need a new box of pencils.

Now IE6 is dead, websites will get prettier

With the arrival of Vista, and then Windows 7, Internet Explorer 6 is finally pretty much dead - and not a moment too soon.


IE6 was the default internet browser that came bundled with Windows XP, and although plenty of people still use XP, not many still use IE6. If you're one of them, repent now, for you shall never enter the kingdom of internet heaven.


So what's the big deal about IE6? Where do I start? How about a little history?


When Microsoft launched Windows XP back in 2001 virtually everyone used a PC or laptop to browse the internet, and almost all of them used Internet Explorer to do it. Now this gave Microsoft the idea that they sort of owned internet browsing, so they could make the rules. They even invented their own tag, called 'marquee' which scrolled things across the page.


So what's the problem? Trying doing a Google search for "IE6 bugs". I just did, and got over 10 millions results.


This browser has been a complete nightmare for web designers from the start. You would diligently follow standards, save your page and... BLAT - Internet Explorer 6 would do something completely stupid with it.


Web designers would spend a large chunk of their time just trying to make IE6 behave like other browsers, ones that followed the standards, like Firefox. Instead of just having an idea for a website and writing the appropriate code, you had to jump through hoops to make IE6 behave itself.


One interesting little IE6 bug was that it didn't handle PNG images properly, and that was a real shame, because they let you do some very pretty things. Let me explain.


There are three types of image files used commonly on the internet.


JPEGs (Joint Photographic Experts Group) are great for photographs because you can render high quality images. But if you compress them too much they get lossy (look crap), and every time you edit and save a JPEG, you will compress it, unless you don't compress them at all, in which case they can be very big. They also don't allow transparency. They're still great, but you have to be careful.


GIFs (Graphics Interchange Format) don't take up much disk space, but they are limited to 256 colours. A nice feature of GIFs is that one of the 256 colours can be transparent, so you can leave 'holes' in your images to see the background through.


But PNGs (Portable Network Graphics) have it all. They can be even bigger than JPEGs, so they are not always the best choice, but they never lose quality, and they fully support variable transparency, so some areas of your image can be fully transparent and others just a bit see-through. This lends itself to some very nice effects.


Sadly, it is the transparency feature of PNGs that IE6 didn't support properly, so many web designers didn't use them, rather than upset the world's most popular web browser.


But now all that is in the past, and you can expect PNGs to take their rightful place as a key part of beautiful web design - I can't wait.