Set minimum width for automatically resized div

Question

Expand a div to take the 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>

Well, that's embarrassing. However, with the fix it still doesn't work. See [link](http://samtest.bdluv.com/index.php); try narrowing the window. — user3657408, Oct 09 '15 at 01:08
on the link to your site you have min-width set to 10px for element.style not 60px like in your example code — NewsletterPoll, Oct 09 '15 at 19:43
I was trying various values. None seem to make any difference. — user3657408, Oct 10 '15 at 15:55

score 0 · Answer 1 · answered Oct 08 '15 at 21:28

0

You want to use

.yourdiv {
    min-width: 100px;
}

Note the dash in min-width.

answered Oct 08 '15 at 21:28

Philipp Meissner

5,273
5
34
59

Set minimum width for automatically resized div

1 Answers1