Grow your CSS skills. Land your dream job.

Help with div collapse.

  • # May 17, 2011 at 7:45 pm

    Hi I have the following problem, I have 2 divs. one with 75% and another with 25%.

    I want that when the div with 25% collapse, 75% will be enlarged to 100%.

    # May 19, 2011 at 10:19 am

    Use Javascript.

    # May 19, 2011 at 5:13 pm

    do you have any link? or how could I search?

    # May 19, 2011 at 5:33 pm


    Not wide content



    Wide content.


    You have to make the 25% one go first in the HTML, but here it is.

    # May 19, 2011 at 10:03 pm

    that is a div inside another.

    i need something like this.



    Without width, to take 100% when the div of 25% collapses





    Not wide content



    # May 20, 2011 at 10:12 am

    You can’t float something that doesn’t have a width because it will just take up 100% of the space. So unless you want to use my example, you’ll have to have some sort of logic involved.

    # May 20, 2011 at 11:07 am

    dejota, in the future please give better detail – I was amazed that anyone even attempted to answer given the O.P.

    try not floating the first div, but place it after the float div in the markup.

    # May 20, 2011 at 1:45 pm


    25% div. Collapsible. On the right





    This div will be 75% width and to the left of the 25% content. If the first div collapses this div will be 100%



    # May 20, 2011 at 1:57 pm

    Funny, Noah. I did that exact thing as my first demo, but it didn’t work locally (no my shock) and went with the other example.

    Copy and pasted yours and it works, so clearly I was having a slow morning!

    # May 20, 2011 at 7:12 pm

    A typo perhaps :)

    # May 29, 2011 at 11:36 am

    I try to use divs for that part of the template, but not collapsing the div right when I wanted.

    The only way I could do to collapse and was maintained with tables.

    			


    < ?php if($this->countModules('right')) : ?>





    < ?php if($this->countModules('user2')) : ?>
    < ?php endif; ?>








    < ?php if($this->countModules('user6')) : ?>
    < ?php endif; ?>

    < ?php if($this->countModules('user7')) : ?>
    < ?php endif; ?>

    < ?php if($this->countModules('user8')) : ?>
    < ?php endif; ?>
    < ?php endif; ?>

    you can see the website here (is in spanish), if you want to inspect the code with firebug.

    btw, I use joomla.

    http://www.tresarroyosweb.com.ar

    # May 31, 2011 at 2:32 am

    hey,
    suppose 25% is not there; than another column occupied by 100% itself…

    # May 31, 2011 at 2:34 am

    hey,
    suppose 25% is not there; than another column occupied by 100% itself…




    25% div. Collapsible. On the right





    This div will be 75% width and to the left of the 25% content. If the first div collapses this div will be 100%



    # May 31, 2011 at 6:04 pm

    Why put the right div before the left div?

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

You must be logged in to reply to this topic.

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