Grow your CSS skills. Land your dream job.

Stacking divs

  • # October 3, 2012 at 1:17 pm

    I’m not sure if this would be a CSS or JavaScript question, so please forgive me if it’s in the wrong place.

    Anyways, I have two divs that have equal width and are side by side. Lets call them div1 and div2. Div1 being on the left and Div2 being on the right. How could I make Div2 move above Div1 after my browser window has been resized or viewed on a small enough mobile device?

    I know in CSS I can use @media only screen and (min/max-width: —px) to change the setup of the divs based on screen size but I didn’t know if I could make a div show above another one instead of below with css or would I have to use some javascript.

    # October 3, 2012 at 1:32 pm

    It’s a cheat really.

    If you float them both RIGHT and put them in your HMTL in the wrong order (i.e. DIV 2 first) it works.

    http://codepen.io/Paulie-D/pen/fGBaF

    # October 3, 2012 at 1:51 pm

    Thanks Paulie_D. That did the trick.

    # October 3, 2012 at 2:06 pm

    I have a small javascript that reads two divs for their heights and then resizes them based on which one had the largest height. How could I rewrite this to only apply if a screen is below a specific screen size.

    var maxHeight = 0;
    $(‘div.jHeight’).each(function() {
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    if (maxHeight < $('#content-section').height()) { maxHeight = $('#content-section').height()}
    });

    $(‘div.jHeight’).each(function() {
    $(this).height(maxHeight);
    });

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

You must be logged in to reply to this topic.

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