Height of main div does't expand if "overflow=visible"

HTML & CSS
1

Hi, there,

I developed a blog using wordpress. Click here to see the blog.. If you guys inspect the element using firebug you can see the height of main div, which is the white background frame with rounded corners behind the content, is set to a fixed value.:

#main {
	clear: both;
/*	overflow: hidden;*/
	padding: 40px 0 0 0;
	margin: 0 5px; 
	background-color: #ffffff;
	-moz-border-radius: 20px;
	border-radius: 20px;
	height: 11300px;
	/* -moz-box-shadow: 0 0 3px 3px #888;
	-webkit-box-shadow: 0 0 3px 5px#888;
	box-shadow: 0 0 3px 3px #888; */
}

I have to do that because if the “overflow: hidden” is commented out then the height of main div doesn’t expand with the content. But I really need to set overflow as visible in order to show the entire date labels which extend out of main div.

Why did this happen? Since the main div is parent of the content div, isn’t the height supposed to expand with the length of content regardless of the setting of overflow?

Please help! I really need to have it fixed asap. Thank you in advance!

2

Why are you trying to use overflow hidden here? It is already hidden. Overflow hidden just removes the scroll bar on a div or body

3

Thank you for your reply. Actually I’m trying to get rid of overflow hidden which was set by the wordpress theme I’m using and editing. If I comment out “overflow=hidden” the date labels at left side show up correctly but the height of main div does not expand. If I just use “overflow=hidden” then the height expanding works but the data labels are cut at the div edge.

Hope I explained it clearly. Thanks again

4

@svcghost: {overflow: hidden;}, when used without a declared height, creates a new block formatting context for the element; it will enclose or contain float descendents.

@BreadPaPa: As you’ve found, there are gotchas raised by the overflow property. For any given method of containing floats, there will be contra-indications for its use. For any need to enclose floats, there will be a method that works. In this case, use {display: table;}. Read the linked article above.

Now do exactly this:

#main {
    background-color: #FFFFFF;
    border-radius: 20px;  /*once is enough if all corners are the same*/
    display: table;
    margin: 0 5px;
    padding: 40px 0 0;
    }

cheers,

gary

5

Thank you very much gary! It is just the solution I have been looking for!

And nice tutorial site of yours, I have bookmarked it!