Set minimum width for automatically resized div

Expand div to take remaining width gives a nice way to make a div use the remaining width. But what if the remaining width approaches 0? I have 2 divs: one with an image in a float left that's the width of the image, and the second with some text. As the window width narrows, the width of the 2nd div becomes narrower and narrower until it disappears (and then moves below the 1st div, which is correct). I want to keep a minimum width for the 2nd div, which I'm trying to do with min-width. But it seems to make no difference. Any suggestions?

<div>
    <div style="float: left;">
        <a href=...></a>
    </div>
    <div style="overflow:hidden; min-width:60px">
        <p>Some text ...</p>
    </div>
    <div style="clear:both;">&nbsp;</div>
<div>
LVL 1
BlearyEyeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
Set a minimum width at the parent div
https://jsfiddle.net/FranIg/2czh8ont/

<div style="min-width:100px">
    <div style="float: left;">
        <a href=...></a>
    </div>
    <div style="overflow:hidden; min-width:60px">
        <p>Some text ...</p>
    </div>
    <div style="clear:both;">&nbsp;</div>
<div>

Open in new window

BlearyEyeAuthor Commented:
Thanks. Will check after the weekend ...
BlearyEyeAuthor Commented:
The problem is that it's in a a responsive template (Joomla), so the width will change dynamically. For the time being I'm using
<style scoped="scoped" type="text/css">
     <.imagefloat{float:left;}
     @media screen and (max-width: 900px){
	.imagefloat{
            float:none !important;}		
}
...
<div class="imagefloat">
<img src="..." alt="" id="" title="" /></div>
</style>

Open in new window

The image displayed is 600 px wide, so it leaves 300 px for the rest. It's not perfect by any means. But at least the accompanying text doesn't disappear.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

BlearyEyeAuthor Commented:
... I should have elaborated a bit. The image is resized adaptively by the template. If the display width is at least 900 px, the image is shown at full size and the text is shown beside it. If not, the float is removed on the image by the media query so it displays first, size-adapted as needed, and the text follows.

Ideally. the text would take the min width it requires and the image would adaptively resize in the space left up to some image min width, after which it would shift to display the image first, text following. But the interactions of image adaptation code and CSS behavior seem to make this a complicated problem.
F IgorDeveloperCommented:
You should add some rules using the same adaptive limits. For example when page is at least 900px also change container style:

<style>
.float_container{
        min-width:600px;
}

@media screen and (max-width: 900px){
      .imagefloat{
            float:none !important;
         }            
       .float_container{
         min-width:400px;
        }
}
</style>


<div class="float_container" >
    <div class="imagefloat">
<img src="..." alt="" id="" title="" />
   </div>

    <div style="overflow:hidden; min-width:60px">
        <p>Some text ...</p>
    </div>
    <div style="clear:both;">&nbsp;</div>
<div>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BlearyEyeAuthor Commented:
Thanks. I've looked this over a couple of times and don't completely understand. But will have to wait till next week for more as I'm traveling.
BlearyEyeAuthor Commented:
This looks plausible. I've created a JSFiddle: http://jsfiddle.net/blearyeye/dynj8wkt/. I'll try it in the context of the website template and see how it works.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.