Ninja CSS Blog

The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.

The Solution: Use the style “overflow: hidden;”

The CSS looked like this:

.container {
border: 1px solid #cccccc;
border-top: none;
}

So then, I was like: SHAZAM! and used “overflow: hidden;” and here is the result:

The CSS now looks like this:

.container {
border: 1px solid #cccccc;
border-top: none;
overflow: hidden;
}

Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try “overflow: hidden;” on the container div and it should do the trick!

乾杯!
Cheers!

This is where I will put up HTML/CSS/Javascript issues I come across. If I have a solution to the problem, I will also post that. I’ll also write about anything I come across that might be seen as helpful or cool to a front-end web developer (aka ME).