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.

Fixed Or Fluid?

A bitter conflict has been raging for years, and it splits web designers right down the middle. It's a bit like 'The War Of The Roses', but without the blood. Let me explain.


The average web designer is a control freak. If he has gone to the trouble of designing a beautiful website, he wants it to look exactly the same for every visitor, even though they are using different web browsers and some have bigger screens than others. Only by setting the width of the page precisely, and nailing down every last pixel, will perfection be achieved. This is the 'fixed' mentality (see anally retentive).


This pixel-perfect website will look mouth-watering for anyone using the same screen resolution as the web designer, but what about the deviants who reduce their screen resolution to 800x600 rather than go to Specsavers, or those who think a 2048x1536 monitor is a sign of virility? The former will view the website with their mouse permanently hovering over the horizontal scroll bar, while the latter are left wondering why the gaps at the sides of the page are five times bigger than the page itself.


Perhaps the worst affected are laptop users with relatively wide, but short screens. They may have big gaps at the sides of the page, but still have to scroll up and down to view all the content.


And here's the real dilemma for the fixed-width army - if you are going to fix the page width, how wide do you make it? Which set of visitors do you want to annoy the most?


So what's the answer? (enter Henry Tudor on his white charger, stage left).


The alternative is not to define the page width in pixels, but as percentage of available width, and to allow the content to flow within the page. This is the 'fluid' approach - no big gaps and no horizontal scrolling.


So why aren't all pages fluid? Well, in truth, it's more difficult to test your website at a variety of widths than it is to just fix it to one. Crazy things can happen if your browser window is really narrow. Your content can end up with all the bits stacked up on top of each other, like a game of Tetris that went badly wrong. On the other hand, if you allow an area of text to get too wide your visitors may have to stick their finger on the screen so as not to lose their place. It's a pain, and the web designer has to allow for it.


The thing that fired me off on this blog was Blogger itself. Google generally use a fluid layout. If you do a Google search for images, they will spread out to fill the screen. But at the time of writing Blogger only allows fixed width layouts, 500-1000 pixels, leaving you with the choice of how best to please your followers.


Not an issue for me, I don't have any followers, but I still care.

Getting Started

I'm pretty sure I won't have much time for blogging, but it's all part of the wonderful webby world, so I thought I'd better get my feet wet.

Some SEO guys think it improves your Google ranking, and customers are starting to ask about getting a blog on their websites, so it's something I need to know about.

I'm also on Facebook, by the way, and I don't use that much either.