CSS Overflow Settings For Web Designers

I struggled a bit with the CSS Overflow a few times myself.

What is CSS Overflow?

CSS Overflow allows text, images, and other website design properties to “spill” out of the box that they were created in.

Why do you need overflow?

Well, the main reason I needed the overflow stylesheet attribute was when I made the menu on the main BsnTech Networks website.  When you hover over “Products” and “Blog”, the menu rolls out to the right to show the sub web pages under that category.

Originally, overflow was turned off in the divider to the right – where the menu was trying to “spill” over into.  So, when I rolled over the menu, it looked like nothing happened.  Well, I certainly cannot have that!

So I had to re-do the website design code in the stylesheet to turn overflow on.

The CSS overflow property can be set to one of the following:

The main ones I use are visible and hidden.  Sometimes, the ‘inherit’ property is used.  The ‘inherit’ property simply means that if you make a divider (<div>) within another, the one that is inside may need to be set to inherit – so it sets it’s overflow property as the first divider on the website.

OK, let’s see some examples now.

Let’s use the same code that I’ve used many times before that puts a blue background and a dotted border around this.  Here is the code in the CSS file:

Good, now, there is no reason to have overflow in this case – because in this example, the box will automatically adjust to the site of the text.  That is because there is not a “height” or “width” CSS property in there. So, let’s change it to include a height property manually by doing this:

Alright, so the box above now has a height of 15 pixels – which we set by setting the style directly in the divider. No problems, right?  The text easily fits in the box.

Now, how about we use the same code – but set the text size to be larger:

OK – now we have an overflow problem! It is very easy to tell that it is getting cut off – and you also do not see the whole string.

So, let’s now set the overflow CSS property to “visible” so we can see the whole thing.  The below does not look pretty because we are overflowing the text out of the box – but in the case where you need it, it comes in handy (especially for menu roll over affects).

Yep, doesn’t look great, but it does the job. So when you are doing website design, this handy tip can help you figure out why it text or images appear to cut off when working with CSS.