I attempted to align two divs next to each other. The challenge was that the right div needed to have a fixed width, while the left div had to be resizable. I experimented with different approaches, but none met all my criteria:
- Right div has fixed width
- Parent div adjusts its height based on the largest child (wraps its children)
- Left div must be resizable
- The HTML structure must follow this specific order (explained at the end):
HTML:
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
I tried absolute positioning for the right div and applied a margin to the left one, which successfully met all requirements, except that the parent div didn't wrap around the largest child as anticipated http://jsfiddle.net/0fxL71xL/3/
.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}
I also experimented with using inline-block and max-width, but then the divs did not align at the top, and I struggled with handling whitespace. Most importantly, the left div didn't resize: http://jsfiddle.net/0fxL71xL/4/
.container{max-width:400px;}
.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}
I also tested with a float right on the right div, but it fell short of my expectations. The closest solution involved rearranging the HTML order and applying float:right to the div intended for the right side. However, this approach prevented me from using an @media query to reposition it below the left div when necessary.
EDIT: While paulie_d's suggestion resolves the issue, I would prefer a method with wider browser support.