Grow your CSS skills. Land your dream job.

overflow div at 100%

  • # June 13, 2009 at 1:58 pm

    Hello all. Just a quick, but important question.

    When a child div’s width is set to be greater than its parent, the child div will extend (‘overflow’) out of the parent.

    Code:
    #parent{
    width: 10px;
    float: left;
    overflow: visible;
    }
    #child{
    width: 1000px;
    height: 100px;
    }

    My question is, How can I utilise this concept having the childs with at 100%?
    I obviously tried setting the childs with at 100% but no overflow occured.

    Thanks.
    Daniel Roy

    # June 13, 2009 at 3:42 pm

    Not really sure what you are trying to achieve. Would it not be simpler to just absolutely position #child?

    # June 13, 2009 at 10:58 pm

    I am reordering the divs for seo purposes, so yes absolute possitioning will work but i was still hoping to get a solution to this.
    I’ll explain further.
    divs are loaded ‘first’ first and ‘second’ second in html but are displayed ‘second’ first and ‘first’ second.

    Code:
    #first{
    width:100%;
    margin-top:300px
    float:right;
    #second{
    width: 0px;
    height:300px;
    float: left;
    overflow: visible;
    }
    #child{
    width: 100%;
    height: 100px;
    }

    # June 14, 2009 at 3:13 am

    width: 100% does not mean 100% of the screen size, it means 100% of the available space (normally the parent width)

    # June 14, 2009 at 9:10 am
    "AshtonSanders" wrote:
    width: 100% does not mean 100% of the screen size, it means 100% of the available space (normally the parent width)

    ah, so it does. Thanks. I’ll scrap this idea and stick with absolute.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".