Within my website, I have a main container called #main-element whose width is dynamic and based on various factors including the window size. Inside this container, there are multiple elements as well as a footer container named #wrapper which always spans the full width of its parent container and houses two child divs, #left and #right.
https://i.sstatic.net/7KzGa.png
The #left div can scale freely down to a minimum width of 300px, while the #right div has a fixed width of 120px. The specific behavior I'm aiming for includes:
- If the width of
#wrapperis large enough to accommodate both child elements (greater than or equal to320px), display them side by side with#leftfilling up the remaining space. - If the parent container cannot fit both child elements, allow
#leftto take up the entire width and display#rightbelow it.
I have successfully implemented most of this functionality, but the one thing that eludes me is how to ensure that #right appears below
#left</code when they cannot fit together horizontally. I am certain there must be a simple solution that I'm overlooking.</p>
<p>I would prefer a solution that does not rely on JavaScript and is compatible with older browsers (e.g. excluding the use of flexbox).</p>
<p>Below, you will find the code I've developed so far. Please note that the JavaScript portion is irrelevant to the issue at hand and is included solely for demonstration purposes.</p>
<p><div>
<div>
<pre class="lang-js"><code>!function(t){t(document).ready(function(){t.fn.asize=function(){t(this).animate({width:t(this).css(t(this).width()+"px"==t(this).css("min-width")?"max-width":"min-width")},{duration:3e3,step:function(i){t("span",this).text(Math.round(i)+"px"),t("#left").text(Math.round(t("#left").width())+"px"),t("#right").text(Math.round(t("#right").width())+"px")},complete:function(){t(this).asize()}})},t("#main-element").asize()})}(jQuery.noConflict());#main-element {
/* this element HAS to be relative */
position: relative;
/* below rules are irrelevant */
height: 100px;
min-width: 360px;
max-width: 570px;
border: 1px solid #f00;
}
#wrapper {
/* width is always 100% and always aligned to bottom */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
#left {
/* force div to have at least 300px and exclude #right from its width */
overflow: hidden;
min-width: 300px;
/* below rules are irrelevant */
background-color: #aa0;
height: 50px;
}
#right {
/* show on the right; width always set, height equal to #left's height */
float: right;
height: 50px;
width: 120px;
/* below rules are irrelevant */
background-color: #990;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- main widget container -->
<div id="main-element">
<!--some number of elements inside the widget -->
<span></span>
<!-- footer of the widget-->
<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
</div>
</div>