CSS

The Power of CSS overflow: hidden;

Posted on by

As a front end developer, I believe you should be learning something new almost everyday to better yourself at your craft, or at least give yourself a better understanding of what it is you’re actually doing/coding. Sure, you may know ┬áthat a float will push some content/image to the left or the right, but are you truly understanding what the meaning of your code is and what it is doing or how it is affecting other elements on your page? I will openly admit, I haven’t always known exactly what it’s doing and why, but I know it works so I don’t bother trying to dig any deeper. I’m sure many are guilty of this.

The goal of my blog is to address topics I don’t find addressed very often or that are maybe over looked, and I really think one of those topics is how powerful overflow: hidden; really is within your CSS. I’ve recently taken on a new front end position, and they have really opened my eyes to the power of this one simple property, and I really want to share it with anyone who is willing to listen. I’m here to explore much more than what most thing this property is commonly used for.

My Initial Understanding

I’m hoping to relate to others who were once in my situation, so I thought I’d describe my entire process through this learning curve. I used overflow:hidden; to prevent text or other elements from running out of a div/section, because ya know, overflow: hidden;, that’s what it sounds like it’s meant for. Little did I know, it’s capable of so much more, don’t let the property name fool you of what it’s capable of doing. What if I said you can also use just overflow: hidden; to clear floats and prevent text from wrapping around images? Sounds kinda crazy huh?

Clearing Floats

I’ve seen many clear fix methods out there and it seems like the most popular is to create a clearfix class to apply a clear to certain components. There a couple of issues with these techniques when using them in large scale websites. Using a clearfix class can become problematic because you’re relying on a future developer to add that class to the module you’re adding to a page and if they don’t do that, your layout is broken. If you have the clear built right in to that actual module within your stylesheet, that issue no long exists. Baking your clearers in to the modules in your stylesheet results in much more reusable and dependable code. Let’s take a look at a container div with a gray background that has two floated elements in it without any kind of clearfix:

No Float Clear

HTML


<div class="module">
    <div class="module-left">
        Left side content
    </div>
    <div class="module-right">
        Right side content
    </div>
</div>

CSS


.module{
  margin: 0 auto;
  width: 800px;
  background: gray;
}

.module-left {
  float: left;
}

.module-right {
  float: right;
}

The Result

See the Pen Floats with no clear by Jason Kinney (@jason-kinney) on CodePen.

Notice how there is no background, because we haven’t cleared our floats. This will become a major problem, but we don’t want to depend on having to add a class to our container in order to clear an object. By simply adding overflow: hidden; to .module, our floats will always be cleared.

Adding overflow: hidden;

The result of adding overflow: hidden; to our module, is that it’s going to self clear itself any time we use this module throughout our website. Take a look at the new CSS and notice all we did was add in the one line, and it solves our clearing issue and our background color is now back…

See the Pen AFrGp by Jason Kinney (@jason-kinney) on CodePen.

 

Prevent Text Wrapping in Media Objects

The next awesome thing overflow: hidden; can control, is whether you want your text to wrap around images or not. I’m sure this may sound a little weird and nutso, but I swear it’s true. Let’s take a look at a regular media object with a picture floated to the left of our content and the text wrapping around it.

See the Pen bJefn by Jason Kinney (@jason-kinney) on CodePen.

What if we don’t want this? Let’s say we need to have the image to the left without the text wrapping around it. Sure, we can add in some more markup to float objects and clear as well, but why do that if we can do it a simpler way? Overflow: hidden; takes care of this problem and provides a quick and easy solution to building different media objects and making them scalable and reusable.

So, our content is wrapped in a div called .media-bd. Let’s see what happens when we simply apply an overflow: hidden; to this object:

See the Pen qjnLE by Jason Kinney (@jason-kinney) on CodePen.


The power of overflow: hidden; has now taken care of this for us, how cool is that?

How does it work?

By applying overflow: hidden; to an object, it does more than just clip text that exceed that container, it converts your object in to a block formatting context. If you’re unfamiliar with block formatting context, take a few minutes to read about it. If you don’t already know about block formatting context, after you give the link a read, you should hopefully have a better understanding of what it does and how overflow: hidden; can be used on your websites.

Ideally, I’d like to expand a little more on some of these sections, but I like to try and keep my articles somewhat short and easy to read. Hopefully what you can take away from this is a better way to code your modules and a better understanding of the real power that overflow: hidden; has and you’re able to utilize this method in your future projects. Happy coding!

Leave a Reply