CODEWITHSUNDEEP
cssoverflow
Navin Nagpal
Navin Nagpal

Reputation: 640

How did overflow actually work here?

I had this central div which had varying content length based on the tab selected in navigation bar. I gave the div a minimum height expecting it to adjust accordingly as per the content length. I also set the height property to auto. This did not work. But adding overflow:hidden solved the problem. I really fail to understand how this actually worked.

Any help will be greatly appreciated

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

EDIT: Apologies if I wasn't able to explain my problem correctly. What was happening without overflow:hidden is that the content within the central div was flowing out of the div, but after using it the height of central div seems to have been adjusted so as to accommodate the content. The relevant css and markup are as follows - 

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
/*border: 1px solid #C6C6C6;*/
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

.main_content{
width: inherit;
height: inherit;
}

.main_content img{
max-width: 100%;
height: auto;
}

#content1{
margin: 20px;
}

.img{
width: 25%;
height: 25%;
margin: 20px;
float: left;
}

.desc{
width: 65%;
height: auto;
min-height: 650px;
float: left;
overflow: hidden;
margin-top: 20px;
font-family: 'Aleor';
font-size: 100%;
}

.desc p:last-child{
padding-bottom: 30px;
}

The HTML

<div class="central">
    <section id="content1">
        <div class="main_content">
            <article class="img"><img src="profile.jpg"/></article>
            <section class="desc">
                <p>The content</p>
            </section>
        </div>
    </section>
</div>

Upvotes: 0

Views: 84

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Also commented this.

You probably have floating elements that cause the problem. You can fix it by using overflow: auto.

By using that, the container recognizes that there are elements inside it.

UPDATE

Check the demo on how overflow:auto works with floated children.

Upvotes: 1

derek_duncan
derek_duncan

Reputation: 1377

overflow: hidden; prevents any content from displaying outside of its parent's container.

In this situation, the content most likely did not fill up the min-height of 700px and therefore had extra whitespace. This was only able to be shrunk through overflow: hidden; (shrinkwrapping the content) or decreasing the min-height.

Upvotes: 0

Related Questions