overflow

Using CSS Overflow Hidden

I know what you’re thinking don’t I? You don’t know this? Are you joking? Well no I’m not. And many of my collegues didn’t know this in fact of all the team I work with, only one of us knew this and the smart arse hadn’t thought to tell us about it. I’m only kidding Dariusz.

So what am I talking about?

The problem occurs when laying out pages using floats. Floats for me revolutionised the web by allowing us to place divs side by side. Basically when creating pages with divs they postion themselves underneath each other but by floating the div (which I imagine is like the puck in Air Hockey at the amusement arcades). So now the divs are floating (on air) above the page and will rest at the highest point in the page structure that they can.

Here’s the CSS

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

#container{
    background-color:#666666;
    padding:10px;
    margin:10px 0 0;
}
#leftCol {
        width:480px;
        float:left;
    }
#rightCol{
        width:480px;
        float:right;
    }

and the HTML Code

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

 <div id="container">
    <div id="leftCol">
        <p>Lorem.....</p>
    </div>
    <div id="rightCol">
        <p>Ipsum.....</p>
    </div>
</div>

The problem is that the div that is containing them has no idea they exist because they are floating above it so it just acts as if nothing is in the div at all and shuts up shop only actually appearing if you have some padding on it. In the demo the container div has a background colour which you cant see because the divv has effectively disappeared.

DEMO1

As you can see the layout is all over the place.

So what do we do?

Well when I learned most of my basic CSS stuff (CSS Mastery by Freinds of Ed was and still is to a certain degree my bible) the best way round this was very unsemantically add some extra content below the float divs to tell the container that there was something in it. The most commonly used element was a
the clear all attribute making sure the browser new that this element had to display below all floated elements to force the container to wrap round the content.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

 <div id="container">
    <div id="leftCol">
        <p>Lorem.....</p>
    </div>
    <div id="rightCol">
        <p>Ipsum.....</p>
    </div>
<br clear="all" />
</div>

DEMO2
This has the same CSS as the first as the first example but as you can see the layout issue is now fixed because the container div knows there is something in it.

Overflow hidden

The problem here is that we have content on the page that is of no use other than we can’t get the page to look right without it. There must be something better i thought (well I didn’t until I spotted it in a document) it was like a revelation but I was sceptical.

Here’s the CSS

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

#container{
    background-color:#666666;
    padding:10px;
    margin:10px 0 0;
        overflow:hidden;
}
#leftCol {
        width:480px;
        float:left;
    }
#rightCol{
        width:480px;
        float:right;
    }

and the HTML Code

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

 <div id="container">
    <div id="leftCol">
        <p>Lorem.....</p>
    </div>
    <div id="rightCol">
        <p>Ipsum.....</p>
    </div>
</div>

As you can see the html code is back to as it was in the first example but the container div has a css property of overflow:hidden so off i went and tested it and low and behold it works.

DEMO3

It actually works if you use overflow scroll but i prefer to use overflow hidden. Now I use it all the time and say to people “oh yeah didn’t you know about that I’ve using it for ages”.