SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.:
    Code:
    #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. #2
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by svcghost View Post
    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
    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. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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:
    Code:
    #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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •