Div that takes remaining horizontal space and stacked vertically on small screen

Question

I need to stack two div elements horizontally side-by-side, where the right one should always adjust its size automatically to its content (up to a max given width) and the left one should just use the space that's left.

Something like this:

So far no problem. I've managed to do this by floating the right div to the right and setting the overflow of the left one to hidden:

HTML:

<div class="frame">
    <div class="right">
        I adjust my with to my content but still need to know my boundaries if I'm floated right (max-width)
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

CSS:

.frame {
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow: hidden;
}

.left {
    overflow: hidden;

    background-color: #709670;
    border: 1px solid black;
}

.right {
    float: right;
    max-width: 200px;

    background-color: #127212;
    color: white;
    border: 1px solid black;
}

The challenge is that I want the two divs to be stacked vertically when the page is displayed on a small screen (or small browser window, ...) like this:

Basically I thought this could be done by a simple media query:

@media screen and (max-width: 700px) {
    .right {
        float: none;
        max-width: none;
    }
}

The only problem with this is that the right div (the one that resizes according to its content) needs to be created BEFORE the left one in the markup to make the floating thing work. As a result, it appears above the left one in the "small" layout:

Here's a working example (just use the middle resizer to switch between the "small" and "large" layout): Example on JSFiddle

I've already tried to accomplish the layout with the usage of display: table and table-cell instead of floating, but this way I fail to make the right column as large as its content and still have a working max-width set.

Answer 1

As said in this stackoverflow post, Flexbox can help you if you don't want to resort to jQuery because you only need to support a single modern browser: Mobile Safari (Edit I also found the height of the left box in IE doesn't work right in my Fiddle, I have NO idea why; it should).

For you that would be: This awesome fiddle!

Edit Since you want the right div to adjust to it's content, you want this example instead

CSS:

.frame {
    position:relative;
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow:hidden;
    flex-flow:row wrap;

    -webkit-justify-content: flex;
    -moz-justify-content: -moz-flex;
    justify-content: flex;

    display: -webkit-box; /* Safari */ 
    display: -moz-box; /* Firefox 21- */
    display: -ms-flexbox; /* IE 10+ */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Standard (Firefox 22+) */

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.left {    
    -ms-flex-order: 1;     
    -webkit-order: 1;
    order:1;

    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #709670;
    border: 1px solid black;
    width: auto;
}

.right {    
    -ms-flex-order: 2;
    -webkit-order: 2;
    order:2;

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #127212;
    color: white;
    border: 1px solid black;
    width: auto;

    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@media screen and (max-width: 700px) {
    .frame {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

I'm extremely happy with my result, I feel you will be to! I believe it has nearly full (Mobile Safari doesn't support it) support!

Answer 2

A CSS/jQuery Based Approach

Assuming that the HTML and content can be adjusted as follows, with the .left element appearing ahead of the .right element:

<div class="frame">
    <div class="left">Lorem ipsum dolor sit amet, c...</div>
    <div class="right">
        <div class="color-wrap">I adjust my width ...</div>
    </div>
</div>

You could use the following CSS for wide screens:

.frame {
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow: auto;
}
.left {
    background-color: #709670;
    border: 1px solid black;
    display: table-cell;
}
.left .color-wrap {
}
.right {
    display: table-cell;
    width: 200px;
    vertical-align: top;
}
.right .color-wrap {
    background-color: #127212;
    color: white;
    border: 1px solid black;
    display: inline-block;
}

and for the smaller screens:

@media screen and (max-width: 700px) {
    .left {
        display: block;
    }
    .right {
        display: block;
        width: auto;
    }
    .right .color-wrap {
        display: block;
        width: auto;
        color: yellow;
    }
}

For the large screen, you can use display: table-cell and either set a width for the .right element or use a combination of max-width and min-width depending on how you want to deal with the end-case of a single line of text.

If you need to background color to paint only the text area, then use a wrapper element such as .color-wrap and apply the background color to it instead of the table-cell parent element.

For the smaller screens, reset the display property to block and for .right set width: auto.

This is a relatively simple approach with only a single constraint related to dealing with the case of .right having a single line of text.

Dealing With Short Lines on the Right - Adjust Width

To allow the .right block to shrink-to-fit single-line content, you need to adjust the width of the .right table-cell.

This can be done using the following jQuery:

var rightCellMaxWidth = parseInt($(".right").css("width"));

function fixRightCellWidth() {
    $(".right .color-wrap").each(function () {
        var rightCellWidth = $(this).outerWidth();
        var rightCellType = $(this).css("display");
        if (rightCellWidth < rightCellMaxWidth 
            && rightCellType == "inline-block") {
            $(this).parent().width(rightCellWidth);
        } else {
            $(this).parent().removeAttr("style");
        }
    });
}

$(window).resize(function () {
    fixRightCellWidth();
});

fixRightCellWidth();

The trick is to get the width of the element .right .color-wrap. You also need to check the display-type to see what media mode you are in, inline-block for large screens and block for smaller screens.

For larger screens, set the right table-cell element width to that of the .color-wrap child. For single line text, this will be less than 200px, and for multi-line, the width will be the max-width value of 200px.

You also need to remove the inline style to clear the width setting for either the multi-line case or the small screen case.

Demo fiddle: http://jsfiddle.net/audetwebdesign/N4KE2/

Design Comment

Without JavaScript/jQuery, the page will degrade gracefully to a fixed-width right element and the page will still be usable.