In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width:
<div id="wrapper">
<div id="left">TEXT TEXT TEXT TEXT</div>
<div id="right">IMAGE</div>
</div>
The desired display for this structure is as follows:
#wrapper{
width: 600px;
display: inline-block;
}
#left{
float: left;
width: 400px;
}
#right{
float: left;
width: 200px;
}
Now, the goal is to make this layout responsive. If the image on the right surpasses 400px in width, it should move below the left div, which will then expand to fill the entire width of the wrapper like so:
#left.width = #wrapper.width - #right.width;
if (#left.width < 200px) {
#left.width = 100%;
#right move to new line;
} else {
display #left div on left side and #right div next to #left div
}