I need help aligning two div elements next to each other. However, if the right div has a minimum width and cannot fit in the available space, it should move below the left div!
<div id="sidebar">
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
Left div - width: 250px; Right div - min-width: 200px;
If #sidebar has a width of 400px then:
left | right
If #sidebar is less than 400px then:
left
right
Test Example:
<html>
<head>
<style>
#sidebar {width: 30%; background: #FFC;}
.box {overflow: hidden;}
.left {background: #F00; float: left; width: 250px;}
.right {background: #FF0; min-width: 200px; display: inline-block;}
.image {background: #222; width: 250px; height: 180px; display: block;}
</style>
</head>
<body>
<div id="sidebar">
<div class="box">
<div class="left"><span class="image"></span></div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Phasellus eget semper dui. Nullam mattis gravida nisi, et viverra velit rutrum sed.</div>
</div>
</div>
</body>
</html>
UPDATE
The #sidebar takes up 30% of the body of my website! How can I ensure that these 30% represent more or less than 400px?!
UPDATE 2
Example: https://example.com/image.png