The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Stacking divs

  • TWG
    # 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.

    # October 3, 2012 at 1:51 pm

    This reply has been reported for inappropriate content.

    Thanks Paulie_D. That did the trick.

    # October 3, 2012 at 2:06 pm

    This reply has been reported for inappropriate content.

    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() {

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed