Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

Why does my content flow outside its box?

By John Faulds /

Usually this question is accompanied by: "It looks fine in Internet Explorer but not Firefox" and it's usually because a height has been specified on the element in question.

IE6 and lower will automatically expand the height of elements to contain their contents, but newer browsers, including IE7 will not do that which means that the layout will look broken under a number of conditions:

  • there is more text on a certain page
  • the visitor increases the text size or has a larger minimum font size set in their browser
  • the visitor's computer displays fonts larger by default
  • one browser displays a certain font at a different font-size than another

So it seems like adding a fixed height to elements isn't such a good idea. So why would you use it in the first place?Well most of the time it seems to fall into one of three types of situation:

  1. the designer creates a background-image of a certain shape and wants their text to fit within this shape
  2. the designer is trying to create equal height columns
  3. the designer is trying to create more than one box that lines up horizontally to have the same height

Dealing with the first instance, creating your site's background without regard for the content that will go inside it is usually a bad idea because of variable content length and differences in text size. It can be done but in most cases, overflow would be set on the containing element which means that it would gain a vertical scrollbar when the content gets too long.

This is acceptable for some designs and I've actually done it myself, but it does have limited uses.

If the background-image is just a shape with, for example, rounded corners, then there are various methods you can use so that the middle part of the area in question will expand with its content. For example, for a fixed width area with rounded corners, you could create an image for the top which includes the top left and right curved corners and then another one at the bottom. The area in the middle can then expand with the content and can have borders or a repeating background-image if necessary.

Creating equal height columns (or any column longest) in CSS is a bit less straightforward then simply adding a height to the columns but there are various ways of accomplishing it.

The third scenario may seem to be similar to equal height columns but what I'm referring to here is not columns but a series of boxes, like those for featured products for example, that sit side by side and have exactly the same dimensions.

And in this situation, I would actually recommend using a height declaration except that we'd only give IE<=6 the height value and for other, more modern browsers, we'd use min-height.

The important thing to remember here is to use a relative value like ems so that the height of the boxes will grow as the browser's text size is increased.

Of course, in this situation, it is assumed that the content in each box is going to be about the same length. If one box is to have far more content than the others, then you'd probably rethink how you wanted to display them.

The only drawback with this method, is that if you decide to change the amount of content, you're more than likely going to have to change your CSS as well which is why I'd only really use it in situations in which the amount of content is similar and unlikely to change very often.