CSS Overflow Issue (with Navigation bar)

Question

I am currently learning CSS and currently I get stuck on "overflow". Here are the codes that I am practicing. I do not understand why when I turn it to overflow: visible, then the webpage will turn to be white? Why is it the case? I have tried all other possible solutions on overflow, like auto, scroll. They all works the way I expect, but not the case of visible? Can anyone explain to me why is it the case?

In my css,

        * {
            color: white;
            margin: 0;
            padding: 0;
        }

        #horizontal_bar {
            background-color: black;
            overflow: hidden; /* When I change it to overflow: visible; the webpage turns white, why is it the case? */
            margin-top: 2em;
        }

        #horizontal_bar ul li{
            list-style-type: none;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #horizontal_bar ul li img {
            height: 12px;
        }

        #horizontal_bar ul li a {
            text-decoration: none;
            padding: 5px 20px;
            height: 12px;
        }

        a:focus, a:hover {
            background-color: gray;
        }

        #content {
            clear: left;
        }

In my HTML,

<body>
    <div id="horizontal_bar">
            <ul>
                <li><a href="" >HTML</a></li>
                <li><a href="" >CSS</a></li>
                <li><a href="" >JAVASCRIPT</a></li>
                <li><a href="" >SQL</a></li>
                <li><a href="" >PHP</a></li>
                <li><a href="" >jQuery</a></li>
                <li><a href="" ><img src="images/search2.png" alt="search"/></a></li>
            </ul>
    </div>
    <div id="content">
        <p>Hello</p>
    </div>
</body>

Here are the 2 screenshots I have captured. The first one is the case, when I set overflow attribute as hidden, and the later one is the case when I set overflow attribute as visible. overflow: hidden overflow: visible

Hope to have a nice explanation on why it is the case when overflow = visible. Thanks.

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

The inner li have float:left, which cause the outer elements to loss its dimension. Outer element need either float or overflow specified to make them grow and contain the inner floating elements.

Not only overflow:hidden, some other value like auto and overlay will also make the div grow.

A div is overflow:visible by default. So it dosen't have any effect.

There is already an answer here - how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem

edited May 23 '17 at 10:29

Community

1
1

answered Jun 24 '15 at 09:13

Felix A J

6,300
2
27
46

1

Its really useful. +1 for your search terms – G.L.P Jun 24 '15 at 09:58
1

thanks... with the idea you have suggested, I have been browsing more on float, and find this link particular useful. [link] (https://css-tricks.com/all-about-floats/) – CHANist Jun 25 '15 at 01:43

G.L.P · Answer 2 · 2015-06-24T09:16:16.777

0

You need to set height property along with overflow to get expected output.

Try like this: Demo

#horizontal_bar {
    background-color: black;
    height:34px;
    overflow: visible;      
    margin-top: 2em;
}

For more info about overflow refer MDN here

edited Jun 24 '15 at 09:16

answered Jun 24 '15 at 08:54

G.L.P

7,119
5
25
41

Not strictly true. I have overflow auto layouts with no height specifications anywhere on the page. You can test this with eg: – Neville Hillyer Jun 25 '15 at 21:51
position: absolute; overflow: auto; top: 0; bottom: 0 – Neville Hillyer Jun 25 '15 at 21:59
@NevilleHillyer: I mentioned only for op's code, not in general.. there are so many ways to get op's expected output, i just give one of them – G.L.P Jun 26 '15 at 03:59
My previous comment was about the unfortunate, although often stated, necessity of a height specification for satisfactory overflow operation. – Neville Hillyer Jun 26 '15 at 10:04

score 0 · Answer 3 · answered Jun 24 '15 at 09:05

0

Paste this

horizontal_bar {

background-color: black;
float: left;
margin-top: 2em;
overflow: visible;
position: relative;
width: 100%; }

answered Jun 24 '15 at 09:05

Sam

11
3

CSS Overflow Issue (with Navigation bar)

3 Answers3

horizontal_bar {