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

css, css-float, html

Solution

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!

Problem

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 `div`s 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.

Original source

Related problems